用 SwiftUI 轻松实现 UITableViewStyleInsetGrouped 的圆角卡片布局

2023-12-12 07:18:21

使用 SwiftUI 轻松创建圆角卡片布局的 tableView

简介

在 SwiftUI 中创建圆角卡片布局非常简单，只需几个步骤，就能实现类似 iOS 13.0 中 UITableViewStyleInsetGrouped 样式的效果。通过使用 VStack 和 HStack 来模拟卡片形状，并借助 RoundedRectangle 来设置圆角，就能轻松打造出美观实用的卡片布局。

创建卡片布局

添加 VStack 和 HStack： 在 SwiftUI 项目的 ContentView.swift 文件中，添加一个 VStack 来创建卡片的容器，再在其内部添加一个 HStack 来承载卡片内容。

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                // 卡片内容
            }
        }
    }
}

添加 RoundedRectangle： 在 HStack 内，添加一个 RoundedRectangle，并设置 cornerRadius 属性来控制卡片的圆角半径。

RoundedRectangle(cornerRadius: 10)
    .fill(Color.white)
    .frame(width: 300, height: 200)

自定义卡片： 根据需要，可以使用 fill() 方法设置卡片颜色，或修改 cornerRadius 属性改变圆角半径。

添加内容

要在卡片中添加内容，例如文本或图像，只需将相应视图放置在 HStack 内即可。

Text("Card \(index + 1)")
    .font(.title)
    .foregroundColor(.black)

示例代码

以下是使用 SwiftUI 创建圆角卡片布局 tableView 的完整示例代码：

struct ContentView: View {
    var body: some View {
        VStack {
            List {
                ForEach(0..<10) { index in
                    HStack {
                        RoundedRectangle(cornerRadius: 10)
                            .fill(Color.white)
                            .frame(width: 300, height: 200)
                            .overlay(
                                Text("Card \(index + 1)")
                                    .font(.title)
                                    .foregroundColor(.black)
                            )
                    }
                }
            }
        }
    }
}