在 SwiftUI 中创建一个计算的 @State 变量

Question

想象一下，我正在设计一个 SwiftUI 屏幕，要求用户输入用户名。屏幕将进行一些检查以确保用户名有效。如果用户名无效，则会显示错误消息。如果用户点击“关闭”，它将隐藏错误消息。

最后我可能会得到这样的结果：

enum UsernameLookupResult: Equatable {
    case success
    case error(message: String, dismissed: Bool)

    var isSuccess: Bool { return self == .success }
    var isVisibleError: Bool {
        if case .error(message: _, dismissed: false) = self {
            return true
        } else {
            return false
        }
    }
    var message: String {
        switch self {
        case .success:
            return "That username is available."
        case .error(message: let message, dismissed: _):
            return message
        }
    }
}

enum NetworkManager {
    static func checkAvailability(username: String) -> UsernameLookupResult {
        if username.count < 5 {
            return .error(message: "Username must be at least 5 characters long.", dismissed: false)
        }

        if username.contains(" ") {
            return .error(message: "Username must not contain a space.", dismissed: false)
        }

        return .success
    }
}

class Model: ObservableObject {
    @Published var username = "" {
        didSet {
            usernameResult = NetworkManager.checkAvailability(username: username)
        }
    }
    @Published var usernameResult: UsernameLookupResult = .error(message: "Enter a username.", dismissed: false)

    func dismissUsernameResultError() {
        switch usernameResult {
        case .success:
            break
        case .error(message: let message, dismissed: _):
            usernameResult = .error(message: message, dismissed: true)
        }
    }
}

struct ContentView: View {
    @ObservedObject var model: Model

    var body: some View {
        VStack {
            Form {
                TextField("Username", text: $model.username)
                Button("Submit", action: {}).disabled(!model.usernameResult.isSuccess)
            }
            Spacer()
            if model.usernameResult.isSuccess || model.usernameResult.isVisibleError {
                HStack(alignment: .top) {
                    Image(systemName: model.usernameResult.isSuccess ? "checkmark.circle" : "xmark.circle")
                        .foregroundColor(model.usernameResult.isSuccess ? Color.green : Color.red)
                        .padding(.top, 5)
                    Text(model.usernameResult.message)
                    Spacer()
                    if model.usernameResult.isSuccess {
                        EmptyView()
                    } else {
                        Button("Dismiss", action: { self.model.dismissUsernameResultError() })
                    }
                }.padding()
            } else {
                EmptyView()
            }
        }
    }
}

只要我的“解雇”动作是一个Button，就很容易实现解雇行为：

Button("Dismiss", action: { self.model.dismissUsernameResultError() })

这将很容易显示错误消息并正确关闭它们。

现在想象我想使用不同的组件而不是 Button 来调用dismiss方法。此外，想象一下我使用的组件只接受 a Binding（例如 a Toggle）。（注意：我意识到这不是一个理想的组件，但在这个简化的演示应用程序中这是为了说明目的。）我可能会尝试创建一个计算属性来抽象这个行为并最终得到：

@State private var bindableIsVisibleError: Bool {
    get { return self.model.usernameResult.isVisibleError }
    set { if !newValue { self.model.dismissUsernameResultError() } }
}

// ...


// replace Dismiss Button with:
Toggle(isOn: $bindableIsVisibleError, label: { EmptyView() })

...但是，这不是有效的语法，并@State在行上产生以下错误：

属性包装器不能应用于计算属性

如何创建可绑定的计算属性？即Binding带有自定义 getter 和 setter 的。

---

虽然不理想，因为它 (A) 只提供一个 setter，并且 (B) 添加了状态重复（这与 SwiftUI 的单一真实来源原则背道而驰），但我想我可以用正常的状态变量来解决这个问题：

@State private var bindableIsVisibleError: Bool = true {
    didSet { self.model.dismissUsernameResultError() }
}

这不起作用，尽管didSet从未调用过。

Answer 1

这是我更喜欢计算属性和“即时”绑定的方法

private var bindableIsVisibleError: Binding<Bool> { Binding (
    get: { self.model.usernameResult.isVisibleError },
    set: { if !$0 { self.model.dismissUsernameResultError() } }
    )
}

和用法（如指定）

Toggle(isOn: bindableIsVisibleError, label: { EmptyView() })