SwiftUI TextField编辑时添加千位分隔符的实现问题

问题描述 #

我想给SwiftUI的TextField添加实时千位分隔符，思路是通过onChange事件响应输入内容，把输入的数字格式化后写回TextField。但输入超过4位数字时，出现了错误提示：“onChange(of: String) action tried to update multiple times per frame.”，问题出在格式化操作改变了文本长度，请问还能实现实时添加千位分隔符吗？

原因分析 #

你当前的写法会触发循环更新：每次onChange监听stringAmount变化，格式化后把结果赋值回stringAmount，这又会再次触发onChange。当输入超过4位时，格式化后的字符串长度和原输入不同（比如输入1000→1,000），这种长度变化会让SwiftUI在同一帧内多次检测到值变化，从而抛出警告。

解决方案 #

方案一：自定义Binding（推荐） #

用自定义Binding替代onChange，把原始输入和格式化显示分开处理，从根源避免循环触发：

import Foundation
import SwiftUI

struct TestFormatTextFieldView: View {
    // 存储未格式化的原始输入，只保留数字和小数点
    @State private var rawAmount: String = ""
    
    // 给TextField用的绑定，负责格式化显示和输入过滤
    private var formattedAmount: Binding<String> {
        Binding(
            get: {
                formatDouble(input: rawAmount)
            },
            set: { newValue in
                // 过滤掉非数字、非小数点的字符
                let filtered = newValue.filter { "0123456789.".contains($0) }
                // 处理多个小数点的情况，确保只有一个
                let parts = filtered.components(separatedBy: ".")
                let cleanedInput: String
                if parts.count > 2 {
                    cleanedInput = parts[0] + "." + parts[1...].joined()
                } else {
                    cleanedInput = filtered
                }
                rawAmount = cleanedInput
            }
        )
    }
    
    var body: some View {
        NavigationStack {
            Form {
                TextField("Amount", text: formattedAmount)
                    .keyboardType(.decimalPad) // 用数字键盘更贴合需求，减少无效输入
                
                Button("Request price") {
                    requestPrice()
                }
            }
        }
    }
    
    func formatDouble(input : String) -> String {
        let formatter = NumberFormatter()
        formatter.numberStyle = .decimal
        formatter.maximumFractionDigits = 2
        
        guard let resultAsDouble = Double(input) else {
            return ""
        }
        
        return formatter.string(from: NSNumber(value: resultAsDouble)) ?? ""
    }
    
    func requestPrice() {
        // 实际使用时，可根据需求用格式化后的字符串或转成数字
        print("request \(formatDouble(input: rawAmount))")
    }
}

struct TestFormatTextFieldView_Prev: PreviewProvider {
    static var previews: some View {
        TestFormatTextFieldView()
    }
}

这个方案的优势：

• 分离原始输入和格式化显示，不会触发循环更新
• 提前过滤无效字符，避免后续格式化出错
• 用.decimalPad键盘更适合金额输入，提升用户体验

方案二：优化原有onChange逻辑 #

如果不想改结构，可以在onChange里加判断，只有格式化后的字符串和当前值不同时才赋值，减少重复触发：

TextField("Amount", text: $stringAmount)
    .keyboardType(.numbersAndPunctuation)
    .onChange(of: stringAmount, perform: { newValue in
        let formatted = formatDouble(input: newValue)
        // 只有格式化结果和当前值不一样时才更新
        if formatted != stringAmount {
            stringAmount = formatted
        }
    })

不过这种方式还是可能存在光标位置跳变的问题，不如自定义Binding稳定。

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