从 TextField 字符串到模型已发布的可选 Integer 属性的 Swift 和 SwiftUI 绑定

Question

我是 Swift 和 SwiftUI 的新手，并且有一个带有 @Published intValue 可选的模型和一个带有 TextField 的视图，其中它的 text/string 属性是双向绑定到模型的 intValue 的。需要确保作为字符串的有效文本条目被转换为模型的有效整数。在 SwiftUI 中处理此问题的推荐方法是什么？代码类似于下面...

//Model
class AppModel:ObservedObject {
 @Published
 var intValue: Int? = 5
}

//View
@ObservedObject
 var appModel = AppModel.shared

TextField("", text: $appModel.intValue)
                    .keyboardType(.numberPad)

更新示例代码...

///////////
import SwiftUI

class Model: ObservableObject {
    static var shared: Model = Model()

    @Published
    var number: Int = 0

    init(){}

}

struct ContentView: View {
    var body: some View {
        TextFieldFormatter()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}


struct TextFieldFormatter: View {
    @ObservedObject
    var model: Model = Model.shared

    @State private var number: Int = 0


    let formatter: NumberFormatter = {
        let numFormatter = NumberFormatter()
        numFormatter.numberStyle = .none
        return numFormatter
    }()

    var body: some View {
        VStack {
            Text("State").onTapGesture {
                self.endEditing()
            }
            TextField("int", value: $number, formatter: formatter).keyboardType(.numberPad)
            Text("Echo: \(number)")
            Text("Observable")
            TextField("int", value: $model.number, formatter: formatter).keyboardType(.numberPad)
            Text("Echo: \(model.number)")
        }
    }
}

struct TextFieldFormatter_Previews: PreviewProvider {
    static var previews: some View {
        TextFieldFormatter()
    }
}

extension View {
    func endEditing() {
        UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to:nil, from:nil, for:nil)
    }
}

Answer 1

SwiftUI 的 TextField 有几个构造函数。其中一个采用 Formatter 参数。

https://developer.apple.com/documentation/swiftui/textfield

import SwiftUI

struct TextFieldFormatter: View {
    @ObservedObject var model: Model = Model.shared

    let formatter: NumberFormatter = {
        let numFormatter = NumberFormatter()
        numFormatter.numberStyle = .none
        return numFormatter
    }()

    var body: some View {
        VStack {
            Text("State").onTapGesture {
                self.endEditing()
            }
            TextField("int", value: $model.number, formatter: formatter).keyboardType(.numberPad)
            Text("Echo: \(model.number)")
            Text("Observable")
            TextField("int", value: $model.number, formatter: formatter).keyboardType(.numberPad)
            Text("Echo: \(model.number)")
        }
    }
}

struct TextFieldFormatter_Previews: PreviewProvider {
    static var previews: some View {
        TextFieldFormatter()
    }
}

此外，如果您尝试使用 onTapGesture 禁用屏幕，您可能会考虑。

添加：

   @State var disabled: Bool = false

和变化：

       Form {
            Text("Disable").onTapGesture {
                //self.endEditing()
                self.disabled = true
            }
            TextField("int", value: $model.number, formatter: formatter).keyboardType(.numberPad)
            Text("Echo: \(model.number)")
            Text("Observable")
            TextField("int", value: $model.number, formatter: formatter).keyboardType(.numberPad)
            Text("Echo: \(model.number)")
        }.disabled($disabled.wrappedValue)

可以通过几种不同的方式在用户输入时提供反馈，但UIViewRepresentable 类中的自定义UITextView 似乎是最常见的。

Answer 2

您可以创建自定义Binding 以传递给TextField。

这是构造Binding<String> 的方法（TextField 需要什么）：

var string = ""

let myBinding = Binding(get: { string }) {
    string = $0
}

Binding 构造函数的第一个参数是 getter。此闭包应返回所需类型的值。

第二个参数是一个setter。它是一个接收新值的闭包，并对其进行处理（通常设置另一个值）。

因此，如果您想创建一个Binding<String> 以传递给获取/设置appModel.intValue 的TextField，您可以创建一个Binding<String> 并将其传递给TextField，如下所示：

TextField("", text: .init(
    get: { self.appModel.intValue.map(String.init) ?? "" },
    set: { self.appModel.intValue = Int($0) }
))
.keyboardType(.numberPad)