swiftui

【SwiftUI】用意した選択肢から選ばせる、Pickerの実装を解説

あらかじめ用意した選択肢から任意の値を選ばせる時に使う「Picker」をSwiftUIで実装する方法を解説しています。使い所は多いと思います。

解説

enumと組み合わせた使い方について公式ドキュメントの方でいい感じに解説されています。利用する機会は多いと思うので、必要であればチェックしてみることをお勧めします。

基本的な使い方

sample

上画像のようなPickerを例に基本的なPickerの使い方を解説します。まず選択肢の配列と選択中の値を管理するプロパティを用意します。

private let segmentArray = ["安打","凡退","犠打/その他"]  
@State private var selectedIndex = 0

これらのプロパティに基づいたPickerを作成します。

Picker("SegmentSelect", selection: $selectedIndex) {
    ForEach(0 ..< segmentArray.count) { index in
        Text(self.segmentArray[index]).tag(index)
    }
}.pickerStyle(SegmentedPickerStyle())
  • Pickerの引数selectionには値を格納したいプロパティの参照を渡します
  • segmentArrayからForEachを使って選択肢を生成しています
  • .tagでその選択肢に紐づけたい値を渡します
  • .pickerStyleで利用したいPickerStyleを指定できます(後述)

今回の例ではselectedIndexには表のように値が格納されることになります。参考

選択肢selectedIndexの値
安打0
凡退1
犠打/その他2
PickerStyleについて

PickerにModifierを適応させることでいろんな種類のPickerを利用することができます。ちなみにこのサンプルではSegmentedPickerStyle()を指定しています。 用意されているPickerStyleはラジオボタン式やお馴染みのホイール式など6種類があります。詳しくは公式ドキュメントを参照

選択画面を表示したり隠したりする

デフォルトでは選択肢は出ていない

hidden

タップされると選択画面が表示される

show

このような挙動は割とよく見かけます。これは選択肢を表示するか否かを管理する@Stateプロパティを用意することで実装することが可能です。

読んでいただきありがとうございます!!

記事として取り上げたトピックを体系化してまとめた内容を電子書籍として販売しています。購入していただくことで執筆の応援ができます。詳細はこちらから