SwiftUI Picker 選擇器教學

當你需要讓使用者從「多個選項中選擇一個」時，Picker 是標準的解決方案。

基礎 Picker

你需要一個變數來儲存使用者選擇的結果，以及定義每個選項的值 (tag)。

struct ContentView: View {
    var colors = ["Red", "Green", "Blue", "Yellow"]
    @State private var selectedColor = "Red"

    var body: some View {
        VStack {
            Picker("選擇顏色", selection: $selectedColor) {
                ForEach(colors, id: \.self) { color in
                    Text(color) // 選項顯示的文字
                }
            }
            
            Text("你選了: \(selectedColor)")
        }
    }
}

Picker 樣式 (.pickerStyle)

Picker 最強大的地方在於它可以變身成完全不同的外觀：

1. .menu (預設): 跳出式選單。
2. .wheel: 滾輪選擇器 (類似 iOS 時間設定)。
3. .segmented: 分段控制 (Segmented Control)，常用於切換 Tab。
4. .navigationLink: 跳轉到新頁面選擇 (需在 NavigationStack 內)。

Picker("顏色", selection: $selectedColor) { ... }
    .pickerStyle(.segmented) // 變成橫向按鈕切換

DatePicker (日期選擇器)

專門用於選擇日期和時間的元件。

struct DateExample: View {
    @State private var birthDate = Date()
    
    var body: some View {
        DatePicker("生日", selection: $birthDate, displayedComponents: .date)
            .datePickerStyle(.graphical) // 顯示月曆形式
            .padding()
    }
}

• displayedComponents: 可以選 .date (只選日期), .hourAndMinute (只選時間) 或兩者都選 (預設)。

學會了 Picker，我們幾乎掌握了所有常用的表單元件。最後，我們要學習如何把這些元件組合成一個漂亮的 Form。