SwiftUI如何将Binding绑定到枚举的特定case？

当SwiftUI视图存在复杂逻辑时，用枚举管理状态是很常见的做法，比如：

struct FooView {
    enum ProgressState {
        case idle
        case loading
        case completed(Model)
        case error
        
        var stateName: String { 
            // 状态名称逻辑实现
        }
    }
    
    @State var state: ProgressState = .idle
    // ...
}

问题场景 #

想要直接将弹窗（如alert/sheet）的显示状态绑定到枚举的特定case，比如当state为.error时显示错误弹窗，但类似$state.error的写法并不支持：

var body: some View {
    Text(state.stateName)
        .alert("oops there was an error", 
               isPresented: <<$state.error>>) {
            // 弹窗操作逻辑
        }
}

当前用额外变量同步状态的方案需要手动维护，Combine方案又存在弹窗关闭时无法确定恢复状态的问题，下面提供几种更优的解决方案：

方案1：给枚举自定义Binding计算属性 #

直接给目标枚举扩展一个返回Binding<Bool>的计算属性，处理状态的读取和切换逻辑：

extension FooView.ProgressState {
    var isError: Binding<Bool> {
        Binding(
            get: { self == .error },
            set: { 
                // 弹窗关闭时，将状态恢复为业务需求的默认值，这里以.idle为例
                if !$0 { self = .idle } 
            }
        )
    }
}

使用时直接绑定这个属性即可：

Text(state.stateName)
    .alert("oops there was an error", isPresented: $state.isError) {
        Button("OK") {}
    }

方案2：通用协议+View扩展（支持多枚举场景） #

如果多个枚举都需要类似的弹窗绑定逻辑，可以定义通用协议，再扩展View的弹窗方法：

步骤1：定义协议 #

protocol CaseIdentifiable {
    associatedtype CaseType: Equatable
    var caseValue: CaseType { get }
}

步骤2：让枚举遵守协议 #

extension FooView.ProgressState: CaseIdentifiable {
    typealias CaseType = FooView.ProgressState
    var caseValue: FooView.ProgressState { self }
}

步骤3：扩展View的alert方法 #

如果需要灵活指定弹窗关闭后的恢复状态，可以添加onDismiss参数：

extension View {
    func alert<State: CaseIdentifiable>(
        _ title: String,
        for targetCase: State.CaseType,
        binding: Binding<State>,
        onDismiss: @escaping () -> State,
        actions: () -> some View
    ) -> some View {
        self.alert(title, isPresented: Binding(
            get: { binding.wrappedValue.caseValue == targetCase },
            set: { 
                if !$0 {
                    binding.wrappedValue = onDismiss()
                }
            }
        )) {
            actions()
        }
    }
}

使用示例 #

Text(state.stateName)
    .alert("oops there was an error", 
           for: FooView.ProgressState.error, 
           binding: $state,
           onDismiss: { .idle }) {
        Button("OK") {}
    }

方案3：自定义ViewModifier（复用特定业务弹窗） #

如果某类弹窗逻辑需要在多个视图中复用，可以封装成ViewModifier：

struct ErrorAlertModifier: ViewModifier {
    @Binding var state: FooView.ProgressState
    let title: String
    
    func body(content: Content) -> some View {
        content
            .alert(title, isPresented: Binding(
                get: { state == .error },
                set: { if !$0 { state = .idle } }
            )) {
                Button("OK") {}
            }
    }
}

// 给View添加便捷调用方法
extension View {
    func errorAlert(title: String, state: Binding<FooView.ProgressState>) -> some View {
        self.modifier(ErrorAlertModifier(state: state, title: title))
    }
}

使用示例 #

Text(state.stateName)
    .errorAlert(title: "oops there was an error", state: $state)

内容的提问来源于stack exchange，提问作者jalone