SwiftUI中Picker绑定值与显示值不符问题咨询

问题根源 #

你遇到的问题是因为SwiftUI中ForEach遍历Range<Int>时，默认会把元素的索引而非元素本身作为Picker的选中值绑定到numberOfPeople。比如你选择显示"2 people"的选项时，对应的索引是0，所以numberOfPeople会被设为0，比显示值小2。

修复方案 #

下面是修正后的完整代码，同时解决了原代码里的其他小问题：

import SwiftUI

struct ContentView: View {
    @State private var numberOfPeople = 2
    
    var body: some View {
        Form {
            Section {
                Picker("Number of People", selection: $numberOfPeople) {
                    // 用闭区间2...10包含10，同时指定id: \.self绑定元素值
                    ForEach(2...10, id: \.self) { count in
                        Text("\(count) people")
                    }
                }
                .pickerStyle(.inline)
                
                // 修正变量名拼写错误，同步显示绑定值
                Text("\(numberOfPeople) people")
            }
        }
    }
}

额外修正说明 #

• 结构体名改为ContentView（遵循Swift大驼峰命名规范）
• 补充了body属性（SwiftUI View必须实现该属性）
• 将Section嵌套在Form中，确保Picker和Section正确渲染
• 把2..<10改为2...10，满足最多10人的需求（原代码的2..<10只包含到9）
• 修正了变量名拼写错误：numberOfPerson改为numberOfPeople

另一种实现方式 #

你也可以先把范围转为数组，再遍历数组元素，效果一致：

import SwiftUI

struct ContentView: View {
    @State private var numberOfPeople = 2
    private let validPersonCounts = Array(2...10)
    
    var body: some View {
        Form {
            Section {
                Picker("Number of People", selection: $numberOfPeople) {
                    ForEach(validPersonCounts, id: \.self) { count in
                        Text("\(count) people")
                    }
                }
                
                Text("\(numberOfPeople) people")
            }
        }
    }
}

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