SwiftUI Picker结合ForEach与@State列表时选中状态丢失问题

代码实现 #

class MyState: ObservableObject {
    @Published var colors = [String]()
    @Published private(set) var selectedColor = "Red" // 原代码private修饰会导致外部无法绑定，改为private(set)更合理
}

struct ContentView: View {
    @EnvironmentObject var myState: MyState

    var body: some View {
        VStack {
            Picker("Please choose a color", selection: $myState.selectedColor) {
                ForEach(myState.colors, id: \.self) {
                    Text($0).tag($0)
                }
            }
            Text("You selected: \(myState.selectedColor)") // 修正原代码的属性访问错误
        }
        .onAppear {
            fetchData()
        }
    }

    func fetchData() {
        // 模拟API请求延迟返回数据
        DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
            myState.colors = ["Blue", "Green", "Yellow"]
        }
    }
}

场景说明 #

• 初始时colors为空数组，API请求完成后通过colors = ["newString", "newString2",...]的方式赋值新数组

问题现象 #

1. 选择Picker中的某一元素
2. 再次点击Picker时，之前的选中状态丢失

问题演示 #

问题原因 #

Picker的选中状态完全依赖于selection绑定的值与ForEach中元素的tag严格匹配：

• 初始时selectedColor为"Red"，但colors是空数组，Picker没有可匹配的选项，本身就无有效选中状态
• API更新colors数组后，若新数组不包含当前selectedColor的值（比如示例中"Red"不在新数组内），Picker重新渲染时找不到对应tag的选项，就会丢失选中状态
• 原代码存在编译错误：Text中直接访问selectedColor，但它是MyState的属性，必须通过myState实例访问

解决办法 #

1. 保证选中值始终存在于选项数组中 #

更新colors后，校验当前选中值的有效性，若不在新数组内则自动设置为合理默认值：

func fetchData() {
    DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
        let newColors = ["Blue", "Green", "Yellow"]
        myState.colors = newColors
        // 检查选中值是否在新数组中，否则设为第一个元素
        if !newColors.contains(myState.selectedColor) {
            myState.selectedColor = newColors.first ?? ""
        }
    }
}

2. 修正选中值的访问权限 #

原代码中selectedColor用private修饰会导致外部无法绑定，改为private(set)，允许外部读取和绑定，但仅能在类内部修改：

@Published private(set) var selectedColor = "Red"

3. 优化初始状态 #

初始colors为空时，将selectedColor初始值设为空字符串，避免一开始就出现无效选中值：

@Published private(set) var selectedColor = ""

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