【SwiftUI】ビューコントローラー：Picker

★iPhoneアプリ開発 ・ビューコントローラー

環境

Xcode：16.1
Swift：6
iOS：16

基本

概要

Pickerとは
※iOS13から
複数の選択肢の中から１つの値をユーザーに選択させるビュー

パラメータ

label：ピッカーのラベル（Formでないと表示されない）
selection：選択している値を保持する状態変数を指定

Picker("ラベル", selection: $selectedName) {
    // ピッカーの選択肢を記載する
}

Picker(selection: $selectedName) {
    // ピッカーの選択肢を記載する
} label: {
    Text("ラベル")
}
例

import SwiftUI

struct ContentView: View {
    // 選択した値を格納する変数と初期値
    @State private var selectedName = "佐藤"

    // 選択肢
    let names = ["高橋", "佐藤", "鈴木"]

    var body: some View {
        // タイトル（FormやListで表示）と格納する変数を指定
        Picker("名前を選択してください", selection: $selectedName) {
            ForEach(names, id: \.self) { name in
                Text(name)
            }
        }

        // タイトルをカスタマイズする場合の書き方
        Picker(selection: $selectedName) {
            ForEach(names, id: \.self) { name in
                Text(name)
            }
        } label: {
            HStack {
                Image(systemName: "list.bullet.clipboard")
                Text("名前を選択してください")
            }
        }

    }
}

#Preview {
    ContentView()
}

表示スタイル（pickerStyle）

※iOS 14から

.pickerStyle(.menu)
inline

.pickerStyle(.inline)
segmented

.pickerStyle(.segmented)
wheel

.pickerStyle(.wheel)

※NavigationStackを使用している場合のみ

import SwiftUI

struct ContentView: View {
    // 選択した値を格納する変数と初期値
    @State private var selectedName = "佐藤"
    
    // 選択肢
    let names = ["高橋", "佐藤", "鈴木","田中","岡田"]
    
    var body: some View {
        NavigationStack {
            Form {
                // タイトル（FormやListで表示）と格納する変数を指定
                Picker("名前を選択してください", selection: $selectedName) {
                    ForEach(names, id: \.self) { name in
                        Text(name)
                    }
                }
                // 表示スタイル
                .pickerStyle(.navigationLink)
            }
        }
    }
}

#Preview {
    ContentView()
}
automatic

デフォルト

.pickerStyle(.automatic)