Pickerを使い選択肢を入力フィールドに表示する方法

選択肢がリスト形式で表示される入力フィールドの作成方法を紹介します。

pickerを使用する方法

pickerを使用する方法

オーソドックスな方法は、pickerを使用する方法です。

使い方

selection	pickerで選択した値を格納するプロパティ .tagで指定した値を格納します
label	設定した文字列がlabelビューとして表示される Form形式のpickerを使用する際に表示されます

選択項目ごとに.tagを指定してやると、選択項目に設定した.tagの値が、selectionに格納されます。
.tagには数値や文字列を設定することができます。

コード例

import SwiftUI

struct PickerSmpView: View {
    // プロパティを初期化
    // Pickerで更新されるプロパティの値を保持できるようにStateを付与
    @State var selectedVege: String = "にんじん"

    var body: some View {
        //野菜を選択して入力する
        VStack {
            Picker("野菜", selection: $selectedVege) {
                Text("にんじん").tag("にんじん")
                Text("たまねぎ").tag("たまねぎ")
                Text("じゃがいも").tag("じゃがいも")
            }
            // selectedVegeにはPickerの.tagで設定した値が格納されている
            Text("あなたが選んだ野菜は" + selectedVege + "です")
        }
    }
}

コード例（ForEachを使用）

ForEachを使用して、以下のように書き換えることも可能です。

import SwiftUI

struct PickerSmpView: View {
    // プロパティを初期化
    // Pickerで更新されるプロパティの値を保持できるようにStateを付与
    @State var selectedVege: String = "にんじん"
    let vegeArr = ["にんじん", "たまねぎ", "じゃがいも"]

    var body: some View {
        //野菜を選択して入力する
        VStack {
            Picker("野菜", selection: $selectedVege) {
                ForEach(vegeArr, id: \.self) { vege in
                    Text(vege)
                }
            }
            Text("あなたが選んだ野菜は" + selectedVege + "です")
        }
    }
}

pickerのスタイルを変更

pickerのスタイルは、.pickerStyleモディファイアを使用することで、変更することができます。

使用可能なスタイルは以下のスタイルです。

DefaultPickerStyle	デフォルトのピッカースタイル
InlinePickerStyle	ピッカーが現在のViewに展開されたスタイル
SegmentedPickerStyle	ピッカーが現在のViewで横に展開されたスタイル
WheelPickerStyle	ピッカーをホイールで表示するスタイル

そのほかにもMenuPickerStyleや、RadioGroupPickerStyleがあります。

MenuとPickerを組み合わせて使う方法

この記事では、MenuとPickerを組み合わせて使用する方法を解説します。MenuとPickerの組み合わせは、ユーザーに選択肢を提供しつつ、限られたディスプレイ上でユーザーインターフェースをいかに効率的に配置するか有効に活用するのに役立...

使い方は、以下のように.pickerStyle(InlinePickerStyle())のようにPickerのモディファイアとして記述します。

import SwiftUI

struct ContentSubView: View {
    // プロパティを初期化
    // Pickerで更新されるプロパティの値を保持できるようにStateを付与
    @State var selectedVege: String = "にんじん"
    let vegeArr = ["にんじん", "たまねぎ", "じゃがいも"]

    var body: some View {
        //野菜を選択して入力する
        VStack {
            Picker("野菜", selection: $selectedVege) {
                ForEach(vegeArr, id: \.self) { vege in
                    Text(vege)
                }
            }
            .pickerStyle(InlinePickerStyle())
            Text("あなたが選んだ野菜は" + selectedVege + "です")
        }
    }
}

struct ContentSubView_Previews: PreviewProvider {
    static var previews: some View {
        ContentSubView()
            .previewInterfaceOrientation(.portrait)
    }
}