【SwiftUI】Pickerビューの使い方とインターフェイスの変更

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ビューではインターフェイスのスタイルを以下の二つから選ぶことができる。

スタイルの変更は以下のとおり、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()
    }
}