SwiftUI TextField切换时如何更新绑定值？未更新时如何获取输入内容？

我之前也碰到过这个坑——用init(_:value:formatter:)创建的TextField，确实只有按下Return键才会同步绑定值，切换到其他字段时界面显示新内容但绑定变量没变化，挺闹心的。下面给你几个实用的解决方案：

方案一：利用onEditingChanged手动同步（最简单） #

这个初始化方法里的onEditingChanged闭包会在编辑状态变化时触发：开始编辑传true，结束编辑（比如切换到其他字段）传false。我们可以在编辑结束时，手动把TextField的当前文本解析后更新绑定值。不过这里需要配合一个临时的@State变量来存输入的文本，因为原初始化方法没法直接拿到当前显示的字符串：

struct NumberInputView: View {
    @State private var inputText = ""
    @Binding var targetValue: Double
    let numberFormatter: NumberFormatter = {
        let fmt = NumberFormatter()
        fmt.numberStyle = .decimal
        fmt.minimumFractionDigits = 2
        return fmt
    }()
    
    var body: some View {
        VStack {
            // 用text绑定而非value绑定，同时监听编辑状态
            TextField("输入数字", text: $inputText)
                .keyboardType(.decimalPad)
                .onAppear {
                    // 初始化时把绑定值转成文本显示
                    inputText = numberFormatter.string(for: targetValue) ?? ""
                }
                .onEditingChanged { isEditing in
                    guard !isEditing else { return }
                    // 编辑结束时解析文本并更新绑定
                    if let number = numberFormatter.number(from: inputText)?.doubleValue {
                        targetValue = number
                    } else {
                        // 解析失败时可以重置文本或者提示错误
                        inputText = numberFormatter.string(for: targetValue) ?? ""
                    }
                }
                // 外部绑定值变化时同步文本
                .onChange(of: targetValue) { newValue in
                    let newText = numberFormatter.string(for: newValue) ?? ""
                    if inputText != newText {
                        inputText = newText
                    }
                }
            
            Text("当前绑定值：\(targetValue)")
            TextField("其他字段", text: .constant(""))
        }
    }
}

方案二：自定义TextField包装器（复用性强） #

如果你的项目里多处需要这种“编辑结束即更新绑定”的TextField，可以封装一个自定义View，把逻辑封装起来，用起来和原生TextField一样方便：

// 先定义一个协议，约束可以被Formatter解析的类型
protocol FormatterCompatible {}
extension Int: FormatterCompatible {}
extension Double: FormatterCompatible {}
extension Float: FormatterCompatible {}

struct AutoCommitTextField<S, T>: View where S: StringProtocol, T: FormatterCompatible {
    let title: S
    @Binding var value: T
    let formatter: Formatter
    let onCommit: (() -> Void)?
    
    init(_ title: S, value: Binding<T>, formatter: Formatter, onCommit: (() -> Void)? = nil) {
        self.title = title
        self._value = value
        self.formatter = formatter
        self.onCommit = onCommit
    }
    
    @State private var internalText = ""
    
    var body: some View {
        TextField(title, text: $internalText)
            .onAppear {
                internalText = formatter.string(for: value) ?? ""
            }
            .onEditingChanged { isEditing in
                if !isEditing {
                    // 编辑结束时解析更新绑定
                    if let parsedValue = formatter.value(for: internalText) as? T {
                        value = parsedValue
                    }
                    onCommit?()
                }
            }
            .onChange(of: value) { newValue in
                let newText = formatter.string(for: newValue) ?? ""
                if internalText != newText {
                    internalText = newText
                }
            }
    }
}

// 使用示例
struct DemoView: View {
    @State private var amount = 0.0
    let currencyFormatter: NumberFormatter = {
        let fmt = NumberFormatter()
        fmt.numberStyle = .currency
        fmt.locale = .current
        return fmt
    }()
    
    var body: some View {
        VStack {
            AutoCommitTextField("金额", value: $amount, formatter: currencyFormatter) {
                print("编辑完成并同步了绑定值")
            }
            Text("当前金额：\(currencyFormatter.string(for: amount) ?? "0")")
            TextField("其他输入", text: .constant(""))
        }
    }
}

方案三：获取TextField当前文本（针对你的onCommit需求） #

如果确实需要在onCommit里拿到TextField显示的原始字符串，原生SwiftUI的TextField做不到，得借助UIViewRepresentable封装UITextField，直接访问底层控件的text属性：

struct TextFieldWithRawTextAccess: UIViewRepresentable {
    let title: String
    @Binding var value: Double
    let formatter: NumberFormatter
    let onCommit: (String) -> Void // 闭包传入当前文本
    
    func makeUIView(context: Context) -> UITextField {
        let textField = UITextField()
        textField.placeholder = title
        textField.keyboardType = .decimalPad
        textField.delegate = context.coordinator
        textField.text = formatter.string(from: NSNumber(value: value))
        return textField
    }
    
    func updateUIView(_ uiView: UITextField, context: Context) {
        let newText = formatter.string(from: NSNumber(value: value)) ?? ""
        if uiView.text != newText {
            uiView.text = newText
        }
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(parent: self)
    }
    
    class Coordinator: NSObject, UITextFieldDelegate {
        let parent: TextFieldWithRawTextAccess
        
        init(parent: TextFieldWithRawTextAccess) {
            self.parent = parent
        }
        
        // 编辑结束时触发（包括切换字段和按Return）
        func textFieldDidEndEditing(_ textField: UITextField) {
            if let text = textField.text {
                parent.onCommit(text)
            }
            // 同步绑定值
            if let text = textField.text, let number = parent.formatter.number(from: text)?.doubleValue {
                parent.value = number
            }
        }
        
        func textFieldShouldReturn(_ textField: UITextField) -> Bool {
            textField.resignFirstResponder()
            return true
        }
    }
}

// 使用示例
struct CommitDemoView: View {
    @State private var price = 0.0
    let priceFormatter: NumberFormatter = {
        let fmt = NumberFormatter()
        fmt.numberStyle = .decimal
        fmt.minimumFractionDigits = 2
        return fmt
    }()
    
    var body: some View {
        VStack {
            TextFieldWithRawTextAccess(title: "价格", value: $price, formatter: priceFormatter) { rawText in
                print("TextField当前文本：\(rawText)")
                // 在这里可以自己解析文本，比如做额外的验证
                if let number = priceFormatter.number(from: rawText)?.doubleValue {
                    print("解析后的数字：\(number)")
                } else {
                    print("输入格式错误")
                }
            }
            Text("当前绑定价格：\(price)")
            TextField("其他字段", text: .constant(""))
        }
    }
}

这几个方案可以根据你的实际需求选：只是需要绑定值及时更新就用方案一或二；必须拿到原始文本就用方案三。

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