SwiftUI 表單:Picker
在 TextField
和 Toggle
之後,另一個常見的表單控件是 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”, “選擇器形式”]