iOS版本间FocusState行为差异：清除按钮低版本失效问题

问题现象 #

为SwiftUI应用实现带数字格式化的输入字段后，发现焦点状态下点击清除按钮的行为存在版本差异：iOS 17上可正常清空内容，但iOS 15.5等低版本中点击清除按钮后文本无变化。

问题原因 #

低版本SwiftUI的TextField结合Formatter使用时，清除按钮触发的绑定值更新存在同步bug——值的变更没有正确触发视图刷新，导致输入框文本无法同步清空。

解决方案 #

方案1：自定义绑定+强制视图刷新 #

通过自定义Binding，在值更新时手动触发视图刷新，解决低版本的同步问题：

struct NumberInputView: View {
    @State private var number: Double? = 123.45
    @State private var refreshTrigger = false
    private let numberFormatter: NumberFormatter = {
        let formatter = NumberFormatter()
        formatter.numberStyle = .decimal
        formatter.minimumFractionDigits = 2
        formatter.maximumFractionDigits = 2
        return formatter
    }()
    
    // 自定义绑定，更新值时触发刷新
    private var numberBinding: Binding<Double?> {
        Binding(
            get: { number },
            set: {
                number = $0
                refreshTrigger.toggle()
            }
        )
    }
    
    var body: some View {
        TextField("输入数字", value: numberBinding, formatter: numberFormatter)
            .textFieldStyle(.roundedBorder)
            .keyboardType(.decimalPad)
            .id(refreshTrigger) // 通过ID变化强制视图刷新
    }
}

方案2：封装UITextField实现完全控制 #

如果需要更稳定的跨版本兼容，直接用UIViewRepresentable封装原生UITextField，手动处理清除按钮事件：

struct CustomNumberTextField: UIViewRepresentable {
    @Binding var number: Double?
    let placeholder: String
    private let formatter: NumberFormatter = {
        let formatter = NumberFormatter()
        formatter.numberStyle = .decimal
        formatter.minimumFractionDigits = 2
        formatter.maximumFractionDigits = 2
        return formatter
    }()
    
    func makeUIView(context: Context) -> UITextField {
        let textField = UITextField()
        textField.placeholder = placeholder
        textField.keyboardType = .decimalPad
        textField.borderStyle = .roundedRect
        textField.clearButtonMode = .whileEditing
        
        // 监听文本变化和清除事件
        textField.addTarget(context.coordinator, action: #selector(Coordinator.handleTextChange), for: .editingChanged)
        return textField
    }
    
    func updateUIView(_ uiView: UITextField, context: Context) {
        uiView.text = number.flatMap { formatter.string(from: NSNumber(value: $0)) }
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(parent: self)
    }
    
    class Coordinator: NSObject {
        private let parent: CustomNumberTextField
        
        init(parent: CustomNumberTextField) {
            self.parent = parent
        }
        
        @objc func handleTextChange(_ textField: UITextField) {
            guard let text = textField.text else {
                parent.number = nil
                return
            }
            if text.isEmpty {
                parent.number = nil
            } else {
                parent.number = parent.formatter.number(from: text)?.doubleValue
            }
        }
    }
}

// 使用示例
struct NumberInputView: View {
    @State private var number: Double? = 123.45
    
    var body: some View {
        CustomNumberTextField(number: $number, placeholder: "输入数字")
    }
}

方案选择 #

• 方案1代码量少，适合快速修复低版本问题，尽量保留SwiftUI原生组件风格；
• 方案2兼容性更强，完全规避SwiftUI低版本的TextFieldbug，适合对稳定性要求高的场景。

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