🔰Optional Views

此篇討論如何用 SwiftUI 產生 Optional View 的一些方法。

👥 相關

• 📦 Unwrap

• .ifLet()

📗 參考

• Optional SwiftUI views - Swift by Sundell

• Optional 型別的 map function 和 SwiftUI 的結合 - 彼得潘

• SwiftUI: Handling optionals - Erica Sarun

利用 .map()

SwiftUI is perfectly happy working with optional views, such as Image? and Text?. 👉 SwiftUI: Handling optionals - Erica Sadun

let value: Int? = 1
let view = value               // Int?
    .map { Text("\($0)") }     // Text?

直接使用 Optional View

上面的 .map() 是間接使用了 Optional View，但這裡的方法是直接使用 Optional View。在下面的範例中，我們必須送兩個 @ViewBuilder closure 給 MyView 使用，讓它可以製造兩個 View，但注意：其實第二個是一個 Optional View (RightContent?)，然後 MyView 再拿這兩個 View 到 body 中去製造最後要的結果。

接著，在 MyView 的 extension 中，我們定義了另一個 .init()，只要送進一個 @ViewBuilder closure 給它就可以，第二個 View 會被自動做成 nil (== EmptyView?.none)。

📦 MyView

import SwiftUI

// 📦 MyView<LeftContent, RightContent>
struct MyView<LeftContent: View, RightContent: View>: View {
    
    let leftContent : LeftContent
    let rightContent: RightContent?  // ⭐️ Optional<RightContent>
    
    // ⭐️ MyView(makeLeftContent: {}, makeRightContent: {})
    init(
        @ViewBuilder makeLeftContent : () -> LeftContent, 
        @ViewBuilder makeRightContent: () -> RightContent?
    ) {
        self.leftContent  = makeLeftContent()
        self.rightContent = makeRightContent()
    }
    
    var body: some View {     // MyView.Body
        HStack {              // HStack<TupleView<(L, R)>>
            self.leftContent  // L: LeftContent
            self.rightContent // R: Optional<RightContent>
        }
    }
}

🌀 MyView

// 🌀 helper extension
extension MyView where RightContent == EmptyView {
    // ⭐️ MyView(makeLeftContent: {})
    // ⭐️ MyView {}
    init(@ViewBuilder makeLeftContent: () -> LeftContent) {
        self.init(
            makeLeftContent : makeLeftContent, 
            // ⭐️ 這裡的 `nil` 是指 `Optional<EmptyView>.none`
            makeRightContent: { nil }
        )
    }
}

💈 範例

// init in extension
let v1 = MyView { Text("Hello") }

// init in definition
let v2 = MyView(makeLeftContent: {
    Text("Hello")
}, makeRightContent: {
    Text("World")
})

// inspect their types
let T1 = type(of: v1)
let T2 = type(of: v2)

print(T1)            // MyView<Text, EmptyView>
print(T2)            // MyView<Text, Text>
print(T1.Body.self)  // HStack<TupleView<(Text, Optional<EmptyView>)>>
print(T2.Body.self)  // HStack<TupleView<(Text, Optional<Text>)>>

🗣 討論

• Optional @ViewBuilder closure - StackOverflow

其他方法

• 📦 Unwrap (只要會使用 .map，Unwrap 是沒有必要的)

• 🌀 View + .ifLet()