SwiftUI作为一个声明式UI框架，如何自定义组件，是很多小伙伴都非常关心的问题。
struct MyView: View {
var body: some View {
Text("Hello, World!")
}
}
上述代码就是一个标准的自定义组件实现。通过上述代码，我们可以看到：
- 自定义组件必须被声明为struct。
- 自定义组件必须满足View协议。
- 自定义组件必须定义符合协议的计算属性：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的设计限制的。
参考：
