SwiftUI TextField货币格式化易用性问题求助

核心问题分析 #

原生SwiftUI TextField绑定Double值配合NumberFormatter.currency时，存在两个明显痛点：

• 初始值为0时固定显示$0.00，用户必须手动删除才能输入新金额
• 误删货币符号$后，后续输入的内容会直接失效无法保存

直接设置zeroSymbol = ""在currency样式下会导致所有输入值失效，改用decimal样式又会丢失货币格式化效果，因此需要通过自定义UITextField封装来解决。

解决方案 #

通过UIViewRepresentable封装UITextField，手动控制货币格式化逻辑，既保留完整的货币样式，又优化用户输入体验：

import SwiftUI

struct CurrencyTextField: UIViewRepresentable {
    @Binding var amount: Double
    var currencyCode: String = Locale.current.currencyCode ?? "USD"
    
    func makeUIView(context: Context) -> UITextField {
        let textField = UITextField()
        textField.keyboardType = .decimalPad
        textField.textAlignment = .right
        textField.delegate = context.coordinator
        // 初始值为0时显示空字符串，而非$0.00
        textField.text = formattedAmount(for: amount)
        return textField
    }
    
    func updateUIView(_ uiView: UITextField, context: Context) {
        // 仅当外部值主动变化时更新输入框，避免输入时循环触发
        if uiView.text != formattedAmount(for: amount) {
            uiView.text = formattedAmount(for: amount)
        }
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(parent: self)
    }
    
    private func formattedAmount(for value: Double) -> String {
        let formatter = NumberFormatter()
        formatter.numberStyle = .currency
        formatter.currencyCode = currencyCode
        // 值为0时返回空字符串，优化初始输入体验
        return value == 0 ? "" : formatter.string(from: NSNumber(value: value)) ?? ""
    }
    
    class Coordinator: NSObject, UITextFieldDelegate {
        let parent: CurrencyTextField
        
        init(parent: CurrencyTextField) {
            self.parent = parent
        }
        
        func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
            // 过滤输入内容，只保留数字和小数点
            let currentText = textField.text ?? ""
            let newText = (currentText as NSString).replacingCharacters(in: range, with: string)
            let cleanedText = newText.replacingOccurrences(of: "[^0-9.]", with: "", options: .regularExpression)
            
            // 限制只能输入一个小数点
            if cleanedText.components(separatedBy: ".").count > 2 {
                return false
            }
            
            // 同步更新绑定的金额值
            if let amount = Double(cleanedText) {
                parent.amount = amount
            } else if cleanedText.isEmpty {
                parent.amount = 0
            }
            
            // 强制重新生成带货币符号的格式化文本，避免符号被删除
            textField.text = parent.formattedAmount(for: parent.amount)
            return false // 手动控制文本更新，阻止系统默认替换逻辑
        }
    }
}

// 使用示例
struct ContentView: View {
    @State private var amount: Double = 0
    
    var body: some View {
        HStack {
            Text("Enter Amount")
            Spacer()
            CurrencyTextField(amount: $amount)
                .frame(width: 150)
        }
        .padding()
    }
}

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

关键逻辑说明 #

1. 初始显示优化：绑定值为0时输入框显示空字符串，用户无需手动删除默认值即可直接输入
2. 输入内容过滤：通过正则表达式移除非数字和小数点的字符，确保输入内容有效
3. 自动格式化维护：每次输入后重新生成带货币符号的文本，避免用户误删符号导致输入失效
4. 双向绑定同步：将清理后的输入文本转为Double，实时更新绑定的金额值

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