SwiftUIのPickerビューは、複数の選択肢から一つをユーザーに選択させるためのビューで、選択した値を設定・取得するためにState変数へのバインドをおこなう。
基本的な使い方
以下は最もシンプルな例で、天気を3種類から選択して、その番号を表示するだけのものだ。
import SwiftUI struct ContentView: View { @State var weather = 1 var body: some View { Picker(selection: $weather, label: Text("天気: \(weather)")) { Text("晴れ").tag(1) Text("曇り").tag(2) Text("雨").tag(3) } .padding() } }

Pickerビューの引数には、まず先頭に$マークをつけたState変数をselectionに指定し、ラベルとして使用するビューをlabelに指定する。
以降、クロージャ内に選択項目のビューを定義すれば良い。
ForEach構造体を使った例
選択項目の数が多いと一つ一つビューを定義するのは大変なので、選択肢を配列として定義しておき、ForEach構造体を使ってまとめて定義する方が一般的だ。
import SwiftUI struct ContentView: View { var weathers = ["晴れ", "曇り", "曇り時々晴れ", "雨", "雪"] @State var weather = 0 var body: some View { Picker(selection: $weather, label: Text("天気: \(weather)")) { ForEach(0..<weathers.count) { Text(self.weathers[$0]) } } .padding() } }
インターフェイスのスタイルを変更する
Pickerビューではインターフェイスのスタイルを以下の二つから選ぶことができる。
WheelPickerStyle | ホイールタイプのスタイル ※Pickerビューのデフォルト |
SecmentedPickerStyle | セグメンティッドコントロールのスタイル |
スタイルの変更は以下のとおり、pickerStyleモディファイアでおこなう。
import SwiftUI struct ContentView: View { var weathers = ["晴れ", "曇り", "雨"] @State var weather = 0 var body: some View { Picker(selection: $weather, label: Text("天気: \(weather)")) { ForEach(0..<weathers.count) { Text(self.weathers[$0]) } } .pickerStyle(SegmentedPickerStyle()) // 追加 .padding() } }
