SwiftUI 基础控件 - Picker

在 SwiftUI 中，Picker 是一个用于让用户在多个选项中选择一个的控件。它可以用在表单、菜单等场景中，支持多种样式，包括列表样式、分段控件样式等。

基本使用

Picker 需要一个绑定变量来存储用户选择的选项，通常配合 @State 来保存选中的值，示例代码如下：

import SwiftUI

struct ContentView: View {
    @State private var selectedOption = "Red" // 默认选项

    let colors = ["Red", "Green", "Blue"]

    var body: some View {
        Picker("Select a color", selection: $selectedOption) {
            ForEach(colors, id: \.self) { color in
                Text(color)
            }
        }
        .pickerStyle(DefaultPickerStyle()) // 设置默认样式
    }
}

在这个示例中，Picker 使用 @State 修饰的变量 selectedOption 绑定用户选择的值。ForEach 遍历颜色数组，每个颜色被添加为一个选项。效果图如下：

使用 SegmentedPickerStyle

可以将 Picker 设置为分段控件样式，适合选项较少的场景，例如切换开关、性别选择等。

Picker("Select a color", selection: $selectedOption) {
    ForEach(colors, id: \.self) { color in
        Text(color)
    }
}
.pickerStyle(SegmentedPickerStyle()) // 分段样式
.padding()

效果图如下：

使用 WheelPickerStyle

WheelPickerStyle 让 Picker 以滚轮样式显示。这种样式适合用于选择较多选项的场景，例如时间、日期选择。

Picker("Select a color", selection: $selectedOption) {
    ForEach(colors, id: \.self) { color in
        Text(color)
    }
}
.pickerStyle(WheelPickerStyle()) // 滚轮样式
.frame(height: 150)

效果图如下：

带标签的 Picker

可以在 Picker 的上方添加一个标签，让用户知道选择的内容。

VStack {
    Text("Choose your favorite color:")
    Picker("Select a color", selection: $selectedOption) {
        ForEach(colors, id: \.self) { color in
            Text(color)
        }
    }
    .pickerStyle(MenuPickerStyle())
}
.padding()

自定义选项内容

如果需要在 Picker 的选项中显示不同的内容，可以自定义选项的视图：

struct ContentView: View {
    @State private var selectedNumber = 1
    let numbers = [1, 2, 3, 4, 5]
    var body: some View {
        Picker("Select a number", selection: $selectedNumber) {
            ForEach(numbers, id: \.self) { number in
                HStack {
                    Image(systemName: "\(number).circle")
                    Text("Number \(number)")
                }
            }
        }
        .pickerStyle(WheelPickerStyle())
    }
}

在这个示例中，每个选项包含一个带数字的图标和文字说明。效果图如下：