一、写在前面的例子

struct ContentView: View {
    var body: some View {
        VStack{
            RedBackgroundAndCornerView.makeLabel(content: Text("text1"))
            RedBackgroundAndCornerView.makeLabel(content: Text("text2"))
            RedBackgroundAndCornerView.makeLabel(content: Text("text3"))
        }
    }
}
struct RedBackgroundAndCornerView<Content:View>{
    static   func makeLabel(content:Content) -> some View {
        content.foregroundColor(.red)
    }
}

上面的代码是传递一个Text,并设置textColor为红色，虽然没有毛病但是在SwiftUI中使用这样的函数调用感觉怪怪的，显得格格不入,然后我们用extension 得到这样，看起来好多了。

extension View{
  func makeLabel() -> some View {
        self.foregroundColor(.red)
    }
}

struct ContentView: View {
    @State var needHidden: Bool = false
    var body: some View {
        VStack{
            Text("text2").makeLabel()
            Text("text3").makeLabel()
            Text("text1").makeLabel()
        }
    }
}

其实我们还可以尝试这样，将Text通过闭包传递过去

struct ContentView: View {
    var body: some View {
        RedBackgroundAndCornerView {
            Text("333")
        }
    }
}
struct RedBackgroundAndCornerView<Content:View>: View{
    let content: Content
    init(content: () -> Content) {
        self.content = content()
    }
    var body: some View {
        content
            .background(Color.red)
            .cornerRadius(5)
    }
}

上面我们看到了VStack和HStack的感觉，尝试这样

  RedBackgroundAndCornerView {
            Text("333")
            Text("4444333")
   }

很明显编译器会报错，普通的闭包不接受我们这样。
我们看一下Hstack，如下。

init(
    alignment: HorizontalAlignment = .center,
    spacing: CGFloat? = nil,
    pinnedViews: PinnedScrollableViews = .init(), @ViewBuilder content: () -> Content
)

对比我们的闭包和它闭包不一样的地方，它有个@ViewBuilder 。

二、@ViewBuilder

通常使用ViewBuilder作为生成子视图的闭包参数的参数属性，允许这些闭包提供多个子视图。例如，下面的contextMenu函数接受一个闭包，该闭包通过视图构建器生成一个或多个视图。

func contextMenu<MenuItems: View>(
    @ViewBuilder menuItems: () -> MenuItems
) -> some View

这个函数的客户端可以使用多语句闭包来提供几个子视图，如下面的例子所示:

myView.contextMenu {
    Text("Cut")
    Text("Copy")
    Text("Paste")
    if isSymbol {
        Text("Jump to Definition")
    }
}

如上那样我们上面的例子只需要把@ViewBuilder 加上，就可以在闭包里写多个视图了

struct ContentView: View {
    var body: some View {
        RedBackgroundAndCornerView {
            Text("333")
            Text("4444333")
        }
    }
}
struct RedBackgroundAndCornerView<Content:View>: View{
    let content: Content
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    var body: some View {
        VStack{
            content
                .background(Color.red)
                .cornerRadius(5)
        }
        
    }
}

在swift 5.1 的另一个新特性 Funtion builders。如果你实际观察 vstack 这个初始化方法的签名，会发现 content 前面其实有一个@vieweuilder标记，而 Vieweuilder 则是一个由@functionBuilder 进行标记的struct。
1 @_functionBuilder public struct ViewBuilder

1 @_functionBuilder public struct ViewBuilder { /* */ }

使用 @functioneuilder 进行标记的类型（这里的 Vieweuilder），可以被用来对其他内容进行标记（这里用evieweuilder 对content 进行标记）。被用 function builder 标记过的viewBuilder 标记以后，content 这个输入的function 在被使用前，会按照 ViewBuilder 中合适的 buildB1ock 进行 build 后再使用。如果你阅读 ViewBuilder 的文档，会发现有很多接受不同个数参数的 buildB1ock 方法，它们将负责把闭包中一一列举的Text 和其他可能的view 转换为一个Tupleview并返回。由此，content 的签名0-二content 可以得到满足。实际上构建这个 vstack 的代码会被转换为类似下面这样的等效伪代码(不能实际编译）。

VStack(alignment: leading)
{ viewBuilder -> Content in
let text1 = Text("Turtle Rock"). font(. title)
let text2 = Text(" Joshua Tree National Park"). font(.subheadline)
return viewBuilder .buildBlock(text1, text2)