SwiftUI中带NumberFormatter的TextField无法清空全部文本

这是正常现象吗？ #

这不是正常行为，是SwiftUI中TextField与NumberFormatter双向绑定时的常见兼容性问题。核心原因是：当你尝试删除所有文本时，NumberFormatter无法将空字符串解析为有效的Double值，导致绑定的value变量无法被正确重置，反而保留最后一次有效解析的数字片段，最终输入框无法清空。

解决办法 #

这里提供两种可行的解决方案：

方案1：改用字符串绑定+手动处理格式 #

放弃直接绑定Double，改用String类型存储输入内容，手动控制输入格式和解析逻辑，彻底避免Formatter的解析冲突：

struct HomeView: View {
    @FocusState private var isFocused: Bool
    @State var inputText: String = ""
    
    private let numberFormatter: NumberFormatter = {
        let formatter = NumberFormatter()
        formatter.currencyCode = "GBP"
        formatter.currencySymbol = ""
        formatter.minimumFractionDigits = 2
        formatter.maximumFractionDigits = 2
        formatter.zeroSymbol = ""
        return formatter
    }()
    
    // 从输入文本解析出Double值
    private var parsedValue: Double {
        guard let number = numberFormatter.number(from: inputText) else {
            return 0
        }
        return number.doubleValue
    }
    
    var body: some View {
        VStack {
            TextField("0.0", text: $inputText)
                .focused($isFocused)
                .border(.red)
                .keyboardType(.decimalPad)
                .toolbar {
                    ToolbarItemGroup(placement: .keyboard) {
                        if isFocused {
                            Spacer()
                            Button("Done") {
                                isFocused = false
                            }
                        }
                    }
                }
                // 过滤非法输入，只允许数字和单个小数点
                .onChange(of: inputText) { newValue in
                    let allowedChars = CharacterSet(charactersIn: "0123456789.")
                    let filtered = newValue.unicodeScalars.filter(allowedChars.contains).map(String.init).joined()
                    
                    // 确保最多一个小数点
                    if filtered.components(separatedBy: ".").count > 2 {
                        inputText = String(filtered.dropLast())
                    } else {
                        inputText = filtered
                    }
                }
        }
    }
}

方案2：自定义UITextField包装器 #

通过UIViewRepresentable包装原生UITextField，利用代理回调直接处理清空事件，绕过SwiftUI的绑定限制：

struct FormattedDecimalTextField: UIViewRepresentable {
    @Binding var value: Double
    let formatter: NumberFormatter
    let placeholder: String
    
    func makeUIView(context: Context) -> UITextField {
        let textField = UITextField()
        textField.placeholder = placeholder
        textField.keyboardType = .decimalPad
        textField.delegate = context.coordinator
        textField.text = formatter.string(from: NSNumber(value: value))
        return textField
    }
    
    func updateUIView(_ uiView: UITextField, context: Context) {
        guard let currentText = uiView.text,
              let formattedText = formatter.string(from: NSNumber(value: value)),
              currentText != formattedText else { return }
        uiView.text = formattedText
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, UITextFieldDelegate {
        private let parent: FormattedDecimalTextField
        
        init(_ parent: FormattedDecimalTextField) {
            self.parent = parent
        }
        
        func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
            guard let currentText = textField.text else { return true }
            let newText = (currentText as NSString).replacingCharacters(in: range, with: string)
            
            // 处理清空逻辑：当输入为空时，直接重置value并更新文本
            if newText.isEmpty {
                parent.value = 0
                textField.text = parent.formatter.string(from: NSNumber(value: 0))
                return false
            }
            
            // 验证输入是否符合格式
            guard let number = parent.formatter.number(from: newText) else {
                return false
            }
            parent.value = number.doubleValue
            return true
        }
    }
}

// 使用示例
struct HomeView: View {
    @FocusState private var isFocused: Bool
    @State var value: Double = 0
    
    private let numberFormatter: NumberFormatter = {
        let formatter = NumberFormatter()
        formatter.currencyCode = "GBP"
        formatter.currencySymbol = ""
        formatter.minimumFractionDigits = 2
        formatter.maximumFractionDigits = 2
        formatter.zeroSymbol = ""
        return formatter
    }()
    
    var body: some View {
        VStack {
            FormattedDecimalTextField(value: $value, formatter: numberFormatter, placeholder: "0.0")
                .focused($isFocused)
                .border(.red)
                .toolbar {
                    ToolbarItemGroup(placement: .keyboard) {
                        if isFocused {
                            Spacer()
                            Button("Done") {
                                isFocused = false
                            }
                        }
                    }
                }
        }
    }
}

方案选择 #

• 方案1适合需要高度自定义输入行为的场景，比如额外的输入验证、格式化实时反馈；
• 方案2更贴近原生SwiftUI TextField的使用习惯，适合希望直接绑定Double值的场景。

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