如何自定义SwiftUI的组件

SwiftUI作为一个声明式UI框架，如何自定义组件，是很多小伙伴都非常关心的问题。

struct MyView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

上述代码就是一个标准的自定义组件实现。通过上述代码，我们可以看到：

1. 自定义组件必须被声明为struct。
2. 自定义组件必须满足View协议。
3. 自定义组件必须定义符合协议的计算属性：body。

我们可以通过上述的规范，来定义需要的元素，组成组件。

当然，我们的组件也可以传参：

struct MyView: View {
    var text: String
    
    var body: some View {
        Text(text)
            .font(.largeTitle)
            .padding()
            .background(Color.blue)
            .clipShape(Capsule())
    }
}

struct ContentView: View {
    var body: some View {
        MyView(text: "Hello World")
    }
}

如果传入的参数发生了变化，当前组件也会重新渲染。

这里有一点和UIKit不同的是，在UIKit里，我们处理的往往是一个固定的组件，内部结构和元素基本上都是确定的，没有变化，如果涉及到需要定义某一部分元素的，UITableView， UICollectionView等也都帮我们处理好了。
但是这个也不是没有代价的，这里的代价就是我们只能使用UIKit提供的布局组件，有很多限制和学习成本。 同时我们想自行定义布局时，也很麻烦。

而SwiftUI不同，我们在SwiftUI中定义布局组件的成本还是相当低的。
比如下面的代码就是我们定义一个GridView所需要的代码：

struct GridStack<Content: View>: View {
    let rows: Int
    let columns: Int
    let content: (Int, Int) -> Content
    
    var body: some View {
        VStack {
            ForEach(0..<rows, id: \.self) { row in
                HStack {
                    ForEach(0..<self.columns, id: \.self) { column in
                        self.content(row, column)
                    }
                }
            }
        }
    }
}

在这里，我们看到，GridStack只定义了Content如何摆放，如何重复，却没有定义Content到底是什么组件。看起来是不是有点像UICollectionView呢？
上述的代码，可以以下面的形式进行调用。

struct ContentView1: View {
    var body: some View {
        GridStack(rows: 3, columns: 3) { (row, col) in
            Text("R\(row)C\(col)")
        }
    }
}

但是这样声明还是有问题的，就是Content无法一次性传入多个元素，只能传入一个参数。

为了解决这个问题，我们需要引入ViewBuilder。

struct GridStack<Content: View>: View {
    let rows: Int
    let columns: Int
    let content: (Int, Int) -> Content
    
    init(rows: Int, columns: Int, @ViewBuilder _ content: @escaping (Int, Int) -> Content) {
        self.rows = rows
        self.columns = columns
        self.content = content
    }
    
    var body: some View {
        VStack {
            ForEach(0..<rows, id: \.self) { row in
                HStack {
                    ForEach(0..<self.columns, id: \.self) { column in
                        self.content(row, column)
                    }
                }
            }
        }
    }
}

在声明时，给content参数加上@ViewBuilder的注解，就可以一次性传入多个元素。类似下面这样。

struct ContentView: View {
    var body: some View {
        GridStack(rows: 3, columns: 3) { (row, col) in
            Text("R\(row)C\(col)")
            Text("R\(row)C\(col)")
            Text("R\(row)C\(col)")
        }
    }
}

但是这里仍然有问题，就是这个组件内部无法传递超过10个元素。这个是ViewBuilder的设计限制的。

参考：

View
ViewBuilder
awesome-function-builders