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

Question

我是 Swift 和 SwiftUI 的新手，并且有一个带有 @Published intValue 可选的模型和一个带有 TextField 的视图，其中它的文本/字符串属性是 2 向绑定到模型的 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

您可以创建一个自定义Binding以传递到TextField.

这是如何构建一个Binding<String>（TextField需要什么）：

var string = ""

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

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

第二个参数是一个setter。它是一个接受新值的闭包，并用它做一些事情（通常设置另一个值）。

所以，如果你想创建一个Binding<String>传递给TextField那个 gets/sets appModel.intValue，你可以创建一个Binding<String>并将它传递给TextField这样的：

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

Answer 2

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)

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