【知识点】理解 @ViewBuilder

[boycgit]

ViewBuilder 结构使用了 @_functionBuilder 来修饰。而闭包使用 @ViewBuilder 来修饰，就会修改语法树，转调 ViewBuilder 的 buildBlock 函数。

[boycgit]

参考文档

• SwiftUI 的 DSL 语法分析：@ViewBuilder 对 DSL 的语法格式至关重要
• SwiftUI 和 Swift 5.1 新特性(4) 苹果先斩后奏？Function Builder 造就 SwiftUI 的 DSL：较为详细讲解
  • Create Your First Function Builder in 10 Minutes：实战文章，教你如何将 function builder 应用起来
• Crash course in Swift's 'function builders' with SwiftUI: Function builders are just syntax sugar
• The power of @ViewBuilder in SwiftUI：由浅入深去理解 SwiftUI 的 DSL 原理

[boycgit]

1. 得一提的是，由于 buildBlock 的 overload 版本最多泛型参数是 10 个。所以当超过 10 个的时候可以使用 Group包一下； 如果有循环可以展开，则可以使用 ForEach。

[boycgit]

借助 @ViewBuilder 可以自定义类似行为的容器

下面我们使用 @ViewBuilder 自定义一个 NotificationView，它具备类似于 VStack 或 HStack 容器功能

import SwiftUI

struct NotificationView<Content: View>: View {
    let content: Content

    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }

    var body: some View {
        content
            .padding()
            .background(Color(.tertiarySystemBackground))
            .cornerRadius(16)
            .transition(.move(edge: .top))
            .animation(.spring())
    }
}

比如我们可以这么使用：

import SwiftUI

struct ContentView: View {
    @State private var notificationShown = false

    var body: some View {
        VStack {
            if self.notificationShown {
                NotificationView {
                    Text("notification")
                }
            }

            Spacer()

            Button("toggle") {
                self.notificationShown.toggle()
            }

            Spacer()
        }
    }
}