SwiftUI 表單：Picker

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

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

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

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

@State private var selected = "Rome"

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

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

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

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 中：

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() 修改器來識別每個選項：

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")
                }
            }
        }
    }
}