SwiftUI中捕获文本框历史输入值并展示的实现方法

问题描述 #

开发基础手动访客计数器时，无法捕获并展示用户输入的历史值与当前值。点击计数器（对应editednumber）弹出输入框输入数字后，需保存该输入值；再次输入新数字时，界面需同时显示上一次输入值（存入previous_editednumber变量）和当前输入值。例如首次输入10显示正常，但输入12后仅显示旧值10，需实现同时展示旧值10与新值12的效果。

问题原因 #

当前代码中，输入框直接绑定editednumber状态变量，用户输入新值时会直接覆盖旧值，且点击OK按钮时未先将上一次的输入值保存到previous_editednumber，导致历史值无法留存。

修改方案 #

1. 添加临时状态变量tempEditedNumber，用于弹窗输入框的绑定，避免直接覆盖editednumber；
2. 打开弹窗时，将当前editednumber赋值给tempEditedNumber，保持输入框默认显示上一次输入值；
3. 点击OK按钮时，先将editednumber的当前值（上一次输入值）存入previous_editednumber，再将editednumber更新为本次输入的新值，最后执行计算逻辑。

修改后的完整代码 #

//  testView.swift
import SwiftUI

struct testView: View {
    @State var current_guests: Int = 0
    @State var denied_guests: Int = 0
    @State var total_guests: Int = 0
    @State var editednumber: Int = 0
    @State var previous_editednumber: Int = 0
    @State private var presentAlert = false
    // 添加临时变量用于弹窗输入
    @State private var tempEditedNumber: Int = 0

    var body: some View {
        VStack {
            VStack {
                Text("total_guests: \(total_guests)")
                Text("current_guests: \(current_guests)")
                Text("editednumber: \(editednumber)")
                Text("previous_editednumber:\(previous_editednumber)")

                Button("\(current_guests)") {
                    // 打开弹窗时，将当前editednumber赋值给临时变量
                    tempEditedNumber = editednumber
                    presentAlert = true
                }
                .alert("", isPresented: $presentAlert, actions: {
                    // 输入框绑定临时变量
                    TextField("Number", value: $tempEditedNumber, formatter: NumberFormatter())
                        .font(.system(size: 18))
                        .foregroundColor(.black)
                        .multilineTextAlignment(.center)
                        .keyboardType(.numberPad)

                    Button("OK", action: {
                        // 先保存上一次的输入值到previous_editednumber
                        previous_editednumber = editednumber
                        // 更新当前输入值
                        editednumber = tempEditedNumber

                        // 执行原有计算逻辑
                        if editednumber >= total_guests {
                            current_guests = editednumber
                            total_guests = editednumber + total_guests
                        }

                        if editednumber < total_guests {
                            current_guests = editednumber
                            total_guests = total_guests - current_guests
                        }
                    })

                    Button("Cancel", role: .cancel, action: {})
                }, message: {
                    Text("Enter number of guests inside")
                })
                .font(.system(size: 58, weight: .heavy))
                .keyboardType(.decimalPad)
                .frame(maxWidth: .infinity, alignment: .center)
                .padding(.bottom, 70)
                .ignoresSafeArea(.keyboard)
            }

            // 主操作按钮
            HStack {
                Button {
                    current_guests += 1
                    total_guests += 1
                } label: {
                    Image(systemName: "plus")
                }
                .foregroundColor(.white)
                .background(Color.green)
                .frame(width: 80, height: 80)
                .font(.system(size: 50))
                .cornerRadius(40)
                .padding()

                Button {
                    denied_guests += 1
                } label: {
                    Image(systemName: "nosign")
                }
                .foregroundColor(.white)
                .background(Color.orange)
                .frame(width: 80, height: 80)
                .font(.system(size: 50))
                .cornerRadius(40)
                .padding()

                Button {
                    current_guests -= 1
                    if current_guests <= 0 {
                        current_guests = 0
                    }
                } label: {
                    Image(systemName: "minus")
                }
                .foregroundColor(.white)
                .background(Color.red)
                .frame(width: 80, height: 80)
                .font(.system(size: 50))
                .cornerRadius(40)
                .padding()
            }
        }
    }
}

struct testView_Previews: PreviewProvider {
    static var previews: some View {
        testView()
    }
}

补充说明 #

如果需要输入框默认显示当前current_guests的值而非上一次输入值，可将打开弹窗时的赋值语句改为tempEditedNumber = current_guests，根据实际需求调整即可。

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