/

SwiftUI 表單:Picker

SwiftUI 表單:Picker

TextFieldToggle 之後,另一個常見的表單控件是 Picker。它允許我們在一系列可選項中進行選擇。

首先,我們需要有一個包含選項列表的數組:

1
var cities = ["Rome", "Milan", "Venice", "Florence"]

然後,我們需要一個屬性來存儲所選擇的選項。我們使用 @State 對其進行封裝,因為它是基於用戶輸入而變化的內容:

1
@State private var selected = "Rome"

最後,我們使用 Picker 視圖。我們傳遞 2 個參數。第一個是標籤,第二個是用於所選項的屬性,在閉包中,我們使用 ForEach 視圖 為每個不同的選項添加一個文本視圖:

1
2
3
4
5
Picker("What's your favorite city?", selection: $selected) {
ForEach(cities, id: \.self) {
Text($0)
}
}

這是我們的 ContentView 的完整代碼:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
struct ContentView: View {
var cities = ["Rome", "Milan", "Venice", "Florence"]

@State private var selected = "Rome"

var body: some View {
Form {
Picker("What's your favorite city?", selection: $selected) {
ForEach(cities, id: \.self) {
Text($0)
}
}
}
}
}

你可以嘗試運行它,它會正確顯示,默認選項如下:

但是即使在預覽模式下或模擬器中,你也無法點擊它。為什麼?

因為你需要將它包裹在 NavigationView 中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
struct ContentView: View {
var cities = ["Rome", "Milan", "Venice", "Florence"]

@State private var selected = "Rome"

var body: some View {
NavigationView {
Form {
Picker("What's your favorite city?", selection: $selected) {
ForEach(cities, id: \.self) {
Text($0)
}
}
}
}
}
}

現在再運行一次,你可以看到標籤的顏色從灰色變為黑色:

你可以點擊它,並將看到選項列表,以及返回的導航鏈結:

點擊其中一個選項,你將看到所選項目被可視化,並替代默認選項:

你也可以避免使用數組作為選項,直接使用文本視圖,但你需要在每個視圖上使用 tag() 修改器來識別每個選項:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
struct ContentView: View {
@State private var selected = "Rome"

var body: some View {
NavigationView {
Form {
Picker("What's your favorite city?", selection: $selected) {
Text("Rome")
.tag("Rome")
Text("Milan")
.tag("Milan")
Text("Venice")
.tag("Venice")
Text("Florence")
.tag("Florence")
}
}
}
}
}

tags: [“SwiftUI”, “Picker”, “Form”, “NavigationView”, “選擇器形式”]