「Pickerビューの使い方を知りたい」
「Pickerビューって何？」
「Pickerビューについて知りたい」
という人に向けて、この記事は書かれています。
どうも、ちょげ（@chogetarou）です。
この記事では、Pickerビューの使い方について解説します。
Pickerビューとは
Pickerビューとは、複数の値から1つの値を選択するためのビューです。
例えば、注文メニューから1つ選択して注文する時などに役立ちます。
使い方
イニシャライザ
Pickerビューのイニシャライザは以下のようになっています。
Picker(selection: <Binding>, label:, content -> ())- selection
選択している値を表す引数です。値が変わるため状態変数（@Stateや@Publish）のバインディング（＄）を指定します。 - label
Pickerビューのラベルです。Pickerの側に表示するビューを指定します。
※注意 理由は分かりませんが、Xcode12から表示されないのであまり役に立ちません。
ラベルを付けたい際は、HStackやVStackを使って行います。 - content（クロージャー）
選択肢を表すビューをまとめるクロージャーです。
.pickerStyle
pickerには、2つのスタイルがあります。
- WheelPickerStyle()（デフォルト）
回転させて選択する - SegmentedPickerStyle()
横並びの選択肢からタップして選択
Wheel 
Segemented
簡単な例
以下は、好きな国を選択するPickerの例です。
@State var select = 0
var body: some View {
VStack {
HStack {
//ラベル
Text("好きな国")
Picker(selection: $select, label: Text("好きな国")) {
Text("アメリカ").tag(0)
Text("イギリス").tag(1)
Text("オーストラリア").tag(2)
}
.frame(width: {}, height:, alignment: .center)
.clipped()
}
Text("\(select)")
}
}tag()
選択肢として表示されるビュー１つ１つにtag()を付けることで、どの値が選択されたのかを判断しています。
tagの値が、selectionに格納されるようになっています。
tag内には、数字・文字列などを入れることが出来ます。
clipped()
デフォルトでは、HStack内のPickerは他のビューと重なるようになっています。
重ならないようにするために、.clippedを使っています。
文字列のタグと画像の選択肢
tagを文字列にし、選択肢を画像にすることも出来ます。
@State var select = "晴れ"
var body: some View {
VStack {
HStack {
Text("天気")
Picker(selection: $select, label: Text("天気")) {
Image(systemName: "sun.min").tag("晴れ")
Image(systemName: "cloud").tag("曇り")
Image(systemName: "cloud.rain").tag("雨")
}
.frame(width: 200, height: 100, alignment: .center)
.clipped()
}
Text("\(select)")
}
}ForEachと配列
Pickerでは、ForEachと配列を使うことが出来ます
以下は、好きな国をForEachと配列を使って実装した例です。
@State var select = 0
var country = ["アメリカ","イギリス","オーストラリア"]
var body: some View {
VStack {
HStack {
Text("好きな国")
Picker(selection: $select, label: Text("好きな国")) {
ForEach(0..<country.count) { index in
Text(country[index]).tag(index)
}
}
.frame(width: 200, height: 100, alignment: .center)
.clipped()
}
Text("\(select)")
}
}ForEach
ForEachは、繰り返しビューを定義することが出来るビューです。
ForEachを使うことによって、選択肢をまとめた配列countryから値を取り出し、ビューにtag()を設定する処理をしています。
まとめ
- Pickerによって、複数の値から選択するビューを作れる
- Pickerには、3つの引数がある
selection 選択された値を格納する状態変数
label Pickerのラベル（何故か使用できない）
content 選択肢を定義するクロージャー - 選択肢に、tag()を付けることで、ユーザーが選択した値が変数に反映されるようになる
- Pickerは、clipped()を付けることで他のビューと重ならないように出来る
コメント