【SwiftUI】Pickerの使い方

![macOS: 12.3.1（21E258）](https://img.shields.io/badge/macOS-12.3.1(21E258)-brightgreen) ![Swift: 5.6](https://img.shields.io/badge/Swift-5.6-brightgreen) ![Xcode: 13.3.1 (13E500a)](https://img.shields.io/badge/Xcode-13.3.1(13E500a)-brightgreen)

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

## Pickerとは？

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

## イニシャライザ
``` swift: ①
init<S>(_ title: S, selection: Binding<SelectionValue>, content: () -> Content) where S : StringProtocol
```
- `title`: ラベル。(String)
- `selection`: Binding型。＠Stateで宣言した変数を`$`を付けて渡す。
- `content`: 選択肢となるView。クロージャ。

``` swift: ②
init(selection: Binding<SelectionValue>, content: () -> Content, label: () -> Label)
```
- `label`: ラベル。（View）クロージャ。

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

## 基本的な使い方
### サンプルコード
```swift: 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)
                }
            }
        }
    }
}
```

### プレビュー

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513223/02828e69-9c94-32af-a691-f32beec0419e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513223/e8160d5b-ca69-e87e-f2e0-5fc75922d797.png)

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

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

#### Inline
`List`または`Form`と組み合わせて使用します。
ラベルの表示あり。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513223/ec9b79a4-495a-95f4-9c9d-f1bd08dd696c.png)

#### Menu
サンプルコードと同じ。
デフォルト値。（iOSのバージョンで変わるみたいです。）
ラベル表示なし。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513223/a754a657-3cbe-2bc3-81c1-294b43459d37.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513223/82414f4f-1821-0e36-a596-a0fbe40e2461.png)

#### Segmented
選択肢が横並びに表示されるスタイル。
ラベルの表示なし。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513223/3bdab81c-dd72-04b5-4824-27184b3194c2.png)


#### Wheel
一般的なロール表示になります。
ラベルの表示なし。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513223/ed1c6f59-5bc0-fe67-248e-316cac441da6.png)

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

``` swift: 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)
                        }
                    }
                }
            }
        }
    }
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513223/d19a3b3b-189f-5b07-6ff5-f1cc36dbfd0b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513223/847c4756-50d3-011f-350a-f64713f10980.png)

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

## 参考
https://developer.apple.com/documentation/swiftui/picker

http://www.sotechsha.co.jp/pc/html/1223.htm

https://capibara1969.com/1608/