SwiftUI-自定义容器

SwiftUI也是可以自定义容器的,我们将创建一个名为 GridStack 的新容器,它可以让我们在网格内创建任意数量的视图。

//意味着内容必须是符合View协议的控件,而GridView本身也必须符合View协议
struct GridStack : View {
    let rows: Int, columns: Int
    //定义了一个闭包,返回需要展示的内容
    let content: (Int, Int) -> Content 

    var body: some View {
        VStack { 
            ForEach(0..

当循环遍历范围时,只有当我们确定范围内的值不会随时间变化时,SwiftUI 才能直接使用范围。这里我们使用ForEach 0.. 此时,我们的自定义容器就可以使用了:

struct ContentView: View {
    var body: some View {
        GridStack(rows: 4, columns: 4) { row, col in
              HStack {
                  Image(systemName: "\(row * 4 + col).circle")
                  Text("R\(row) C\(col)")
            }
        }
    }
}

为了更灵活的使用自定义容器,我们可以使用@ViewBuilder-视图构建器,它允许我们发送多个视图并让它为我们形成一个隐式堆栈。
我们为GridStack创建一个自定义初始化器,以便我们可以将content闭包标记为使用 SwiftUI 的视图构建器系统:

 init(rows: Int, columns: Int, @ViewBuilder content: @escaping (Int, Int) -> Content) {
     self.rows = rows
     self.columns = columns
     self.content = content
 }

有了它,SwiftUI 现在将自动在我们的单元格闭包中创建一个 隐式水平堆栈:
GridStack(rows: 4, columns: 4) { row, col in
    Image(systemName: "\(row * 4 + col).circle")
    Text("R\(row) C\(col)")
}

你可能感兴趣的:(SwiftUI-自定义容器)