【SwiftUI 🔰】PickerとPickerStyleの使い方を説明してみました！

SwiftUIのPickerは、ユーザーが選択肢の中から1つ（または複数）を選ぶためのUIパーツです。

Pickerとは？

Pickerは、iOSアプリで「ドロップダウンメニュー」「リスト選択」「セグメント選択」などを作るためのコンポーネントです。

基本の使い方

struct ContentView: View {
    @State var selectedColor = "赤"
    let colors = ["赤", "青", "緑"]

    var body: some View {
        VStack {
            Picker("色を選んでください", selection: $selectedColor) {
                ForEach(colors, id: \.self) { color in
                    Text(color)
                }
            }
            Text("選んだ色：\(selectedColor)")
        }
        .padding()
    }
}

様々なPickerStyle

SwiftUIでは、PickerStyleを使ってPickerの表示スタイルを変えることができます。

1.wheel スタイル （良くアプリで見るスタイル）

iPhoneのアラーム設定のようなUIになります。

2.segmented スタイル (タブ切り替え風）

例:

struct ContentView: View {
    @State var selectedColor = ""
    let colors = ["🍎", "🍌", "🍇"]

    var body: some View {
        VStack {
            Text("好きなフルーツを選んでください")
                .font(.title2)

            Picker("フルーツ", selection: $selectedColor) {
                ForEach(colors, id: \.self) { color in
                    Text(color)
                }
            }
            .pickerStyle(SegmentedPickerStyle())

            Text("あなたが選んだフルーツ：\(selectedColor)")
                .padding(.top, 20)
        }
        .padding()
    }
}

• → 横並びのボタンで簡単に切り替えられるスタイルです。

3.MenuPickerStyle (ポップアップスタイル）

• ラベルをタップするとメニューが開く形式。スペースを取らずに済みます。

まとめ

項目	内容
用途	選択肢の中から1つを選ぶUI
基本構文	Picker("ラベル", selection: $state) { ... }
スタイル	.wheel, .segmented, .menuなどで見た目を変更可能