🌀view.if(_:then:)

swift⟩ custom ⟩ extension ⟩ View ⟩ .if(_:then:)

... there is yet another problem beyond animations. When you use applyIf with a view that contains a ＠State property, all state will be lost when the condition changes. 👉 objc.io

... the outermost type is a _ConditionalContent. This is an enum that will either contain the value from executing the if branch, or the value from executing the else branch. 👉 objc.io

💾 程式

extension View {
    /// transform self if `condition` is met.
    /// ```
    /// view.if(condition) { $0.hidden() }
    /// ```
    @ViewBuilder public func `if`<M: View>(
        _ condition: Bool, 
        then transform: (Self) -> M
    ) -> some View {
        if condition { transform(self) } 
        else { self }
    }
    
    /// transform self if `condition` is met, otherwise do another transform.
    /// ```
    /// view.if(condition) then: { $0.hidden() } else: { $0.border() }
    /// ```
    @ViewBuilder public func `if`<T: View, F: View>(
        _ condition: Bool, 
        then doThis: (Self) -> T, 
        else doThat: (Self) -> F
    ) -> some View {
        if condition { doThis(self) } 
        else { doThat(self) }
    }
}

💈 範例

struct ContentView: View {
    
    let red  : Color? = .red
    let color: Color? = nil
    
    var body: some View {
        VStack {
            
            // .if()
            Text("Hello World")
                .if(true){ $0.padding() }
                .if(true){ $0.border(Color.black) }
                
            // .if(_:then:else:)
            Text("Hello World")
                // ⭐️ Swift 5.3: Multiple Trailing Closures
                // .if(true) { $0.padding() } else: { $0.background(Color.purple) }
                .if(false, then: { $0.padding() }, 
                    else: { $0.background(Color.purple) })
                
            // ⭐️ SwiftUI 新功能：目前沒作用！
            // .ifLet(_:then:)
            Text("Hello World")
                .ifLet(red) { $0.foregroundColor($1) }
            
        } // HStack
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.gray)
            .padding()
            .background(Color.orange)
    }
}

📗 參考

• Design+Code ⟩ Conditional modifier

• SwiftLee ⟩ How to create a Conditional View Modifier in SwiftUI

• Conditional view modifiers - Five Stars

• objc.io ⟩ Why Conditional View Modifiers are a Bad Idea ⭐️

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

• [Swift 5.3預覽] Multiple Trailing Closures - 史努比的第一個家

📘 手冊

• Swift ⟩ Trailing Closures

👥 相關

• 🌀 View + .hideIf(_:)

• Can we implement it with ViewModifier❓

• .if(let:then:)

• ViewBuilder

• Tips ⟩ iOS version

⬇️ 應用

• view.overlayText()