SwiftUI中使用Picker修改Observable类内数据的问题求助

问题根源 #

1. 自定义结构体courseItem的grade是不可变常量（let），无法被Picker修改；
2. Picker的selection需要绑定到Binding类型，直接遍历数组元素得到的是值副本，无法同步修改原数据；
3. 原代码的类型不匹配导致编译器无法快速完成类型检查。

修复步骤及代码 #

1. 修改自定义结构体，允许修改成绩

首先将grade从let改为var，同时遵循Swift命名规范将结构体名改为大写开头：

struct CourseItem: Identifiable {
    var id = UUID()
    let name: String
    var grade: String // 改为可变属性
}

2. 绑定Picker到Observable类的数组元素

有两种简洁的实现方式：

方式一：通过数组索引绑定（兼容iOS16及以下）

@Observable
class Courses {
    var items = [CourseItem]()
}

struct ContentView: View {
    @State private var courses = Courses()
    let grades = ["A", "B", "C"]
    
    var body: some View {
        List {
            // 遍历数组索引，获取原元素的Binding引用
            ForEach(courses.items.indices, id: \.self) { index in
                HStack {
                    Text(courses.items[index].name)
                    Spacer()
                    Picker("Grade", selection: $courses.items[index].grade) {
                        ForEach(grades, id: \.self) { grade in
                            Text(grade)
                        }
                    }
                    .pickerStyle(.menu) // 优化List中Picker的显示样式
                }
            }
        }
        // 添加测试数据方便验证
        .onAppear {
            courses.items = [
                CourseItem(name: "数学", grade: "A"),
                CourseItem(name: "英语", grade: "B"),
                CourseItem(name: "物理", grade: "C")
            ]
        }
    }
}

方式二：直接遍历绑定数组（iOS17+推荐）

利用iOS17的@Observable框架特性，直接获取数组的Binding集合，代码更简洁：

@Observable
class Courses {
    var items = [CourseItem]()
}

struct ContentView: View {
    @State private var courses = Courses()
    let grades = ["A", "B", "C"]
    
    var body: some View {
        List {
            // 直接遍历绑定的数组，得到每个元素的Binding
            ForEach($courses.items) { $item in
                HStack {
                    Text(item.name)
                    Spacer()
                    Picker("Grade", selection: $item.grade) {
                        ForEach(grades, id: \.self) { grade in
                            Text(grade)
                        }
                    }
                    .pickerStyle(.menu)
                }
            }
        }
        .onAppear {
            courses.items = [
                CourseItem(name: "数学", grade: "A"),
                CourseItem(name: "英语", grade: "B"),
                CourseItem(name: "物理", grade: "C")
            ]
        }
    }
}

关键说明 #

• 两种方式都能让Picker的选择直接同步到Courses类的数组中，满足多视图共享数据的需求；
• 修改后编译器的类型检查问题会自动解决，因为现在selection绑定的是正确的Binding<String>类型；
• .pickerStyle(.menu)是可选配置，避免List中显示滚轮式Picker导致布局混乱，可根据需求调整。

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