SwiftUI如何在Picker的onChange事件中获取选中元素的索引

方法一：通过选中值反向查找索引 #

直接在onChange回调里，利用选中的newValue在options数组中匹配对应的索引，代码修改如下：

Picker("Username", selection: $selectedOption) {
    ForEach(options, id: \.self) {
        Text($0)
    }
}
.id(UUID())
.pickerStyle(.menu)
.onChange(of: selectedOption) { newValue in
    // 处理索引可能为nil的情况
    if let index = options.firstIndex(of: newValue) {
        print("Username:", newValue, "索引:", index)
    } else {
        print("未找到对应选项")
    }
}

注意：如果options数组包含重复元素，firstIndex(of:)只会返回第一个匹配项的索引，这种场景更适合用方法二。

方法二：绑定索引而非选项值 #

修改ForEach同时遍历索引和元素，将selection绑定到索引变量，这样onChange里直接就能拿到索引，还能通过索引获取对应选项值：

// 在View的@State中定义索引绑定变量
@State private var selectedIndex = 0

// 修改Picker部分代码
Picker("Username", selection: $selectedIndex) {
    ForEach(options.indices, id: \.self) { index in
        Text(options[index])
            .tag(index) // 必须添加tag，与selection的类型匹配
    }
}
.id(UUID())
.pickerStyle(.menu)
.onChange(of: selectedIndex) { newIndex in
    let selectedValue = options[newIndex]
    print("Username:", selectedValue, "索引:", newIndex)
}

这种方法更精准，即使数组存在重复元素，也能准确获取选中项的位置。

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