SwiftUI TextField数字输入实时更新及字符串转Int求和问题

问题根源 #

SwiftUI 中使用带value+formatter参数的TextField，默认只会在编辑结束（失去焦点/按下回车）时同步绑定值，搭配没有回车按键的数字键盘时触发更新更困难。

实现方案 #

将绑定变量改为String类型实现实时同步，手动做String到Int的安全转换即可：

struct ContentView: View {
    // 改为String类型绑定，实现输入实时更新
    @State private var numOneText: String = "0"
    @State private var numTwoText: String = "0"

    var body: some View {
        NavigationView {
            VStack {
                Form {
                    Section {
                        // 绑定text参数而非value
                        TextField("Number One", text: $numOneText)
                            .keyboardType(.numberPad)

                        TextField("Number Two", text: $numTwoText)
                            .keyboardType(.numberPad)
                    }

                    NavigationLink {
                        // 转换为合法Int后传值，转换失败默认返回0
                        AddedView(numOne: Int(numOneText) ?? 0, numTwo: Int(numTwoText) ?? 0)
                    } label: {
                        Text("Navigate")
                    }
                }
            }
        }
    }
}

struct AddedView: View {
    let numOne: Int
    let numTwo: Int
    // 实时计算求和结果
    private var added: Int {
        numOne + numTwo
    }

    var body: some View {
        VStack(spacing: 20) {
            Text("第一个数字：\(numOne)")
            Text("第二个数字：\(numTwo)")
            Text("求和结果：\(added)")
                .fontWeight(.bold)
        }
    }
}

补充优化 #

如果需要过滤输入中的非数字字符，避免用户粘贴非法内容，可以给TextField加输入过滤逻辑：

TextField("Number One", text: $numOneText)
    .keyboardType(.numberPad)
    .onChange(of: numOneText) { newValue in
        // 只保留数字字符
        numOneText = newValue.filter { $0.isNumber }
    }

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