swiftUI中的四种Picker用法

Picker 是一个用于从选项列表中选择值的控件。

看看官方如何定义的：

Picker是一个泛型控件，用于创建一个选择器。

当在 Form 中使用 Picker 时，选择器样式会根据平台和系统版本自动变化。

在本文中，我们将探索所有可能的选择器样式，以便你可以选择最适合你需求的一种。

Default picker style

如果你没有指定选择器样式，SwiftUI 会根据平台和系统版本选择默认样式。

在 iOS 16 中，选择器将使用 menu 样式。

menu 样式会在用户点击选择器时显示一个弹出菜单的选项列表。

struct ContentView: View {
    @State private var selectedTheme = "Dark"
    let themes = ["Dark", "Light", "Automatic"]
    
    var body: some View {
        NavigationStack {
            Form {
                Section {
                    Picker("Appearance", selection: $selectedTheme) {
                        ForEach(themes, id: .self) {
                            Text($0)
                        }
                    }
                }
            }
            .navigationTitle("Display & Brightness")
        }
    }
}

The default picker style in iOS 16.

在未来的 iOS 版本中，默认样式可能会发生变化。

如果你想使用这个样式，可以通过 .pickerStyle(.menu) 明确指定给一个选择器视图。

Picker("Appearance", selection: $selectedTheme) {
    ForEach(themes, id: .self) {
        Text($0)
    }
}
.pickerStyle(.menu)

Navigation Link Picker Style

如果你有一个很长的选项列表，并希望将选项选择放到另一个视图中，你可以使用 navigationLink 样式。

这是你在 Apple 设置应用中看到的那种样式。

struct ContentView: View {
    @State private var selectedTheme = "Dark"
    let themes = ["Dark", "Light", "Automatic"]
    
    var body: some View {
        NavigationStack {
            Form {
                Picker("Appearance", selection: $selectedTheme) {
                    ForEach(themes, id: .self) {
                        Text($0)
                    }
                }
                .pickerStyle(.navigationLink)
            }
            .navigationTitle("Display & Brightness")
        }
    }
}

该选择器将表现得像一个导航链接，点击后会跳转到一个包含选项列表的新视图。

.pickerStyle(.navigationLink)

Inline Picker Style

如果你只有几个选项，inline 样式可能是一个不错的选择。

它会将每个选项嵌入在表单中的其他控件之间。使用这种样式，你只需一次点击就可以选择选项。

struct ContentView: View {
    @State private var selectedTheme = "Dark"
    let themes = ["Dark", "Light", "Automatic"]
    
    var body: some View {
        NavigationStack {
            Form {
                Picker("Appearance", selection: $selectedTheme) {
                    ForEach(themes, id: .self) {
                        Text($0)
                    }
                }
                .pickerStyle(.inline)
                Toggle("Bold Text", isOn: .constant(true))
            }
            .navigationTitle("Display & Brightness")
        }
    }
}

我还添加了一个 Toggle 控件，以演示选择器如何与其他控件排布。

.pickerStyle(.inline)

Wheel Picker Style

Wheel 选择器样式会以可滚动的滚轮形式展示选项。

这种样式同样将选项嵌入在表单的其他控件中，但以滚轮的外观呈现。

以下是该样式的一些行为特点：

• 它具有固定高度，不受选项数量影响。
• 只能显示有限数量的选项。

struct ContentView: View {
    @State private var selectedTheme = "Dark"
    let themes = ["Dark", "Light", "Automatic"]
    
    var body: some View {
        NavigationStack {
            Form {
                Picker("Appearance", selection: $selectedTheme) {
                    ForEach(themes, id: .self) {
                        Text($0)
                    }
                }
                .pickerStyle(.wheel)
                Toggle("Bold Text", isOn: .constant(true))
            }
            .navigationTitle("Display & Brightness")
        }
    }
}

.pickerStyle(.wheel)

Segmented Picker Style

最后一种样式是 segmented，每个选项会以标签页的样式呈现。

struct ContentView: View {
    @State private var selectedTheme = "Dark"
    let themes = ["Dark", "Light", "Automatic"]
    
    var body: some View {
        NavigationStack {
            Form {
                Picker("Appearance", selection: $selectedTheme) {
                    ForEach(themes, id: .self) {
                        Text($0)
                    }
                }
                .pickerStyle(.segmented)
                Toggle("Bold Text", isOn: .constant(true))
            }
            .navigationTitle("Display & Brightness")
        }
    }
}

所有选项在同一行上水平排列，因此它只适用于选项数量较少的选择器。

.pickerStyle(.segmented)

本文使用 「Markdown 在线编辑器 | 公众号内容排版工具」 排版