【SwiftUI】Pickerの使い方

はじめに

最近SwiftUIをあまり触っておらず忘れがちなので復習ついでに記事にします。

Pickerとは？

Pickerとは複数の値の中から1つの値を選ぶUI部品です。

イニシャライザ

①

init<S>(_ title: S, selection: Binding<SelectionValue>, content: () -> Content) where S : StringProtocol

• title: ラベル。(String)
• selection: Binding型。＠Stateで宣言した変数を$を付けて渡す。
• content: 選択肢となるView。クロージャ。

②

init(selection: Binding<SelectionValue>, content: () -> Content, label: () -> Label)

• label: ラベル。（View）クロージャ。

ラベルのカスタマイズ（色の変更など）が不要なら①、必要なら②を使う。
今回は①を使いました。

基本的な使い方

サンプルコード

CountetView.swift

import SwiftUI

struct ContentView: View {
    enum Pokemon: String, CaseIterable, Identifiable {
        case Bulbasaur
        case Charmander
        case Squirtle
        case Pikachu
        
        var jpName: String {
            switch self {
            case .Bulbasaur: return "フシギダネ"
            case .Charmander: return "ヒトカゲ"
            case .Squirtle: return "ゼニガメ"
            case .Pikachu: return "ピカチュウ"
            }
        }
        var id: Self {
            self
        }
    }

    @State private var selectedPokemon: Pokemon = .Bulbasaur
    
    var body: some View {
        VStack {
            Image(selectedPokemon.rawValue)
            Picker("ポケモン", selection: $selectedPokemon) {
                ForEach(Pokemon.allCases) { pokemon in
                    Text(pokemon.jpName)
                }
            }
        }
    }
}

プレビュー

スタイル

指定方法

モディファイア.pickerStyle(_:)でスタイルを指定することができます。

スタイルの種類

iOSで使用できるスタイルは4つあります。
スタイルによってラベルが表示されるものとされないものがあります。

Inline

ListまたはFormと組み合わせて使用します。
ラベルの表示あり。

Menu

サンプルコードと同じ。
デフォルト値。（iOSのバージョンで変わるみたいです。）
ラベル表示なし。

Segmented

選択肢が横並びに表示されるスタイル。
ラベルの表示なし。

Wheel

一般的なロール表示になります。
ラベルの表示なし。

NavigationViewと組み合わせる

NavigationViewとListもしくはFormと組み合わせることで、
NavigationLinkが自動的に生成され、選択肢を別のViewで表示することができます。

ContentView.swift

struct ContentView: View {
    //省略
    var body: some View {
        NavigationView {
            VStack {
                Image(selectedPokemon.rawValue)
                List {
                    Picker("ポケモン", selection: $selectedPokemon) {
                        ForEach(Pokemon.allCases) { pokemon in
                            Text(pokemon.jpName)
                        }
                    }
                }
            }
        }
    }
}

さいごに

今回はPickerの使い方をまとめてみました。
私の備忘録記事ですが、誰かのお役に立てれば幸いです。

参考