前一篇第 10 天是提到「SwiftUI 與 List 與 Identifiable」，雖然本系列文章基本上沒有前後關聯，如果你是還沒讀過前一篇的讀者，也推薦你去讀讀。

前言

Picker 是 SwiftUI 裡面的選擇器，在 UIKit 中和 UIPickerView 。但是和 UIPickerView 不同， Picker 能夠用 .pickerStyle 這個 modifier 來指定不同的樣式，非常強大。

基本用法 - wheel 樣式

struct ContentView: View {
    @State private var selectedDay = 0
    private let numbers = [1, 2, 3, 4, 5]

    var body: some View {
        Picker("Day", selection: $selectedDay) {
            ForEach(numbers, id: \.self) { number in
                Text("\(number)")
                    .tag(number)
            }
        }
        .pickerStyle(.wheel)
        .padding()
    }
}

別忘了設定 tag

.tag(number)

在 SwiftUI 的 Picker ，是利用 tag 來定位選擇到哪個元素

Segment 樣式

struct ContentView: View {
    @State private var selectedDay = 0
    private let numbers = [1, 2, 3, 4, 5]

    var body: some View {
        Picker("Day", selection: $selectedDay) {
            ForEach(numbers, id: \.self) { number in
                Text("\(number)")
                    .tag(number)
            }
        }
        .pickerStyle(.segmented)
        .padding()
    }
}

Dropdown 樣式 (預設)

這應該算是身為 UIKit 的我最心心念念的其中一個，想當年可是為了一個下拉選單絞盡腦汁、拼命找適合用的 libraries ，或是想辦法拒絕設計師（不對

struct ContentView: View {
    @State private var selectedDay = 0
    private let numbers = [1, 2, 3, 4, 5]

    var body: some View {
        Picker("Day", selection: $selectedDay) {
            ForEach(numbers, id: \.self) { number in
                Text("\(number)")
                    .tag(number)
            }
        }
        .pickerStyle(.menu) // 或是不加也可以
        .padding()
    }
}

預設狀態

開啟狀態

結語

到這裡就是在 SwiftUI 該如何建立各種的 Picker 和 tag 。

那今天的 SwiftUI 的大大小小就到這邊，以上，明天見！

環境

• Xcode 15 beta 8

本篇使用到的 UI 元件和 modifiers 基本上沒有受到版本更新影響

因此 Xcode 14 等環境下使用也是沒問題的。