SwiftUI中实现Picker选择时弹确认Alert后再更新选中值

核心思路：不要直接将Picker组件绑定到最终业务状态值，通过中间临时状态承接用户选择动作，待用户确认后再同步更新真实状态，从根源规避onChange修饰符值变更后才触发的时序问题。

实现逻辑 #

1. 先定义三类状态变量

• 真实业务状态：存储用户最终确认后的选中值，供后续业务逻辑调用
• Picker绑定临时状态：初始值和真实状态保持一致，专门承接用户的点击选择操作
• 弹窗控制状态：控制确认警告框的显隐

2. 交互流转规则

• Picker全程只绑定临时状态，不直接操作真实业务值
• 监听临时状态变化，用户点击任意选项触发临时状态变更时，立即弹出确认框
• 用户点击确认：将临时状态的值同步给真实业务状态，完成选中值更新
• 用户点击取消：将临时状态重置为当前真实业务状态的值，Picker选中状态自动回退到上一次确认的选项，不会产生脏数据

完整代码示例 #

struct ContentView: View {
    // 真实生效的选中值，业务逻辑统一使用该值
    @State private var selectedStrength = "Low"
    // Picker绑定的临时值，初始与真实值保持一致
    @State private var tempSelectedStrength = "Low"
    // 确认弹窗显隐控制
    @State private var showConfirmAlert = false
    // Picker选项列表
    private let strengths = ["Low", "Medium", "High"]
    
    var body: some View {
        NavigationView {
            Form {
                Section {
                    Picker("Strength", selection: $tempSelectedStrength) {
                        ForEach(strengths, id: \.self) { strength in
                            Text(strength)
                        }
                    }
                    .onChange(of: tempSelectedStrength) { _ in
                        // 用户选择新选项时立刻弹出确认框
                        showConfirmAlert = true
                    }
                    .alert("确认修改", isPresented: $showConfirmAlert) {
                        Button("确认") {
                            // 确认后才更新真实选中值
                            selectedStrength = tempSelectedStrength
                        }
                        Button("取消", role: .cancel) {
                            // 取消时回退临时值，Picker选中状态自动恢复
                            tempSelectedStrength = selectedStrength
                        }
                    } message: {
                        Text("确定要将强度设置为\(tempSelectedStrength)吗？")
                    }
                }
            }
            .navigationTitle("设置")
        }
    }
}

适配说明 #

• 该方案兼容SwiftUI所有Picker样式，包括Form中默认的导航跳转式选择器、下拉式选择器、分段选择器
• 若需要使用自定义弹窗，只需替换.alert修饰符为自定义弹窗组件即可，核心的状态同步逻辑无需修改
• 若需要在确认时执行额外校验逻辑，直接在确认按钮的回调中添加即可，校验不通过时同样回退临时值即可

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