📦ViewBuilder

SwiftUI ⟩ Views ⟩

From Xcode 12, both switch and if let are supported in the ViewBuilder!

⭐️ 重點

You typically use ViewBuilder as a parameter attribute for child view-producing closure parameters, allowing those closures to provide multiple child views. 👉 SwiftUI ⟩ View ⟩ ViewBuilder

As for ViewBuilders, it is mainly used to create custom container views, which can also become a reusable view component. 👉 Understanding SwiftUI's ViewModifiers and ViewBuilders

A good rule of thumb for me has to be to use a modifier first, and only use a builder when the code patterns really pulled strongly for that syntax. 👉 View Builders - NetSplit.com

@ViewBuilder is one of the possible function builders. 👉 Swift with Majid

📘 手冊

• SwiftUI ⟩ View ⟩ ViewBuilder

📗 參考

• ViewBuilder & Extra argument in call 問題 - 彼得潘

• Understanding SwiftUI's ViewModifiers and ViewBuilders

  - VINSOL

• The power of @ViewBuilder in SwiftUI - Swift with Majid

• View Builders - NetSplit.com

• 新版 SwiftUI 的 ViewBuilder 可以輸入 if let，switch & 宣告變數常數 - 彼得潘

👥 相關

• Result Builders

• Opaque Types

• can we change a State var in ViewBuilder closure❓

• Closures

• Adaptive Layout

🗣 討論

• what is “a block containing no statements”?

• Change @State in a @ViewBuilder closure ⭐️

• Alternative to switch statement in SwiftUI ViewBuilder block?

• Reddit ⟩ Switch statements inside function builders are part of Swift 5.3

ViewBuilder as a Parameter

⭐️ 重點

• You typically use ViewBuilder as a parameter attribute for child view-producing closure parameters, allowing those closures to provide multiple child views.

• 通常 @ViewBuilder closure 具有 @escaping 的特性，因為一般這個 closure 會在 .init(content:) 中傳進來，然後在 var body 中用到，如果沒有事先設為 @escaping 的話，那麼這個 closure 在 .init 中傳進來後，會隨著 .init 結束而消失，因此也沒辦法事後在 var body 中用到，所以會產生 compiler 錯誤。 問：那麼 @escaping closure 會存放在那裏呢 🤔❓ 答：通常會存放在函數外部的變數或陣列中。

• 但反過來說，如果傳進來的 @ViewBuilder closure 馬上在 .init 中就用掉了，這時就不需要加 @escaping 這個屬性了。

📘 手冊

• SwiftUI ⟩ ViewBuilder

• Escaping Closures

🗣 討論

• Why is @ViewBuilder closure escaping?

• Optional @ViewBuilder closure

Using ViewBuilder ⭐️

共有四個步驟：

1

// ⭐️ Step 1: Create a View struct like this:
// ⭐️ Note  : `Content` conforms to `View`
struct MyContainerView<Content: View>: View {
    ...
}

2

// ⭐️ Step 2: Add `content` property and initializer
struct MyContainerView<Content: View>: View {
    let content: Content
    init(@ViewBuilder content: () -> Content) { 
        self.content = content() 
    } 
}

3

// ⭐️ Step 3: Implementing `View` protocol requirement
struct MyContainerView<Content: View>: View {

    let content: Content
     
    var body: some View {
        // use `content` somewhere in your code
        content
        // ... (other customizations)
    }
}

4

// ⭐️ Step 4: Use `MyContainerView` just like a `VStack` or `HStack`
struct ContentView: View {
    var body: some View {
        MyContainerView {
            // content here ...
        }
    }
}

template

// ⚠️ 模板使用注意事項：
//   1. 記得更改 `MyContainerView` 名稱。
//   2. 只要填寫步驟 ⭐️ 4，其他步驟不需更動。
struct MyContainerView<Content: View>: View {

    // ⭐️ 1. `content` 屬性
    //       `MyContainerView` 的原始內容，由 .init(content:) 傳進來。
    let content: Content
    
    // ⭐️ 2. `init()`
    //       `content` 是一個擁有 @ViewBuilder 屬性的 closure，
    //        所以可以像用 `HStack` 一樣使用 `MyContainerView`。
    init(@ViewBuilder content: () -> Content) { 
        self.content = content() 
    }
    
    // ⭐️ 3. 遵循 `View` 協定
    var body: some View {
        // ⭐️ 4. 調整 `content` 成為你要的樣子。
    }
}

Examples

📦 Card

// ⭐️ generic structure
struct Card<Content> : View where Content : View {
    
    // ⭐️ 卡片的內容，由 .init(content:) 傳進來。
    // ⭐️ `Content` 的型別也是由 init(content:) 決定。
    var content: Content
    
    // init(content:)
    init(@ViewBuilder content: () -> Content) {  // ⭐️ @ViewBuilder 
        self.content = content()
    }
    
    // view body
    var body: some View {
        // 卡片內容
        content
            // 卡片風格
            .padding()                  // 留白邊
            .foregroundColor(.black)    
            .background(Color.white)    // 白背景
            .cornerRadius(8)            // 截圓角
            .shadow(radius: 4)          // 畫陰影
    }
}

解說

在 📦 Card 中：

init(@ViewBuilder content: () -> Content)

content 是一個擁有 @ViewBuilder 屬性的 closure， 因此我們在使用 Card 的時候，可以像用 HStack 一樣， 使用下面的語法：

Card { ... }

其中 { ... } 就是 content closure。

但這個 closure 並不是一般的 closure，它是一個 ViewBuilder， 意思就是說：這個 closure 裡面「每一行程式碼」所產生的 view都會變成 ViewBuilder 裡面的某個 buildBlock() 的「參數」，例如我們輸入：

Card {
    C0
    C1
}

這段程式碼其實會呼叫 ViewBuilder 的： .buildBlock(C0, C1) 函數，然後產生一個新的 view 出來，而這個 view 的型別就會被自動設定成 Content。以上面的例子來說，

Content == Card<TupleView<C0, C1>>

💈 範例

💈 範例

import SwiftUI
import PlaygroundSupport

// live view
struct ContentView: View {
    var body: some View {
        Card {                // 📦 Card
            HStack {
                Image(systemName: "person.circle")
                Text("Hello World")
            }.font(.largeTitle)
        }.padding(40).background(Color.gray)
    }
}

PlaygroundPage.current.setLiveView(ContentView())

📗 參考

• View Builders - NetSplit.com