SwiftUI - Pickerの使い方

1. Pickerの使い方

image

ここではPickerの使い方についてまとめています。Pickerは複数の選択肢の中からひとつを選択するという場面で使用できます。使うときは下記のように@Stateで初期値を設定してPicker {...}内に表示したい内容を書きます。画像のような選択項目を回すようなスタイル(WheelPickerStyle)がデフォルトのようです。

struct ContentView: View {
  enum Fruit: String, CaseIterable, Identifiable {
    case Apple
    case Orange
    case Grape
    
    var id: String { self.rawValue }
  }
  @State private var selectedFruit = Fruit.Apple
  
  var body: some View {
    VStack {
      Picker("Fruit", selection: $selectedFruit) {
        Text("Apple").tag(Fruit.Apple)
        Text("Orange").tag(Fruit.Orange)
        Text("Grape").tag(Fruit.Grape)
      }
      Text("選択: \(selectedFruit.rawValue)")
    }
  }
}

enum - 列挙型。関係する複数の値をグループ化したようなもの

上記と内容は同じですが、下記ではForEachを使用して出力しています。この時に.tag()を追加しないと選択と出力が一致しないので忘れないようにします。

struct ContentView: View {
  enum Fruit: String, CaseIterable, Identifiable {
    case Apple
    case Orange
    case Grape
    
    var id: String { self.rawValue }
  }
  @State private var selectedFruit = Fruit.Apple
  
  var body: some View {
    VStack {
      Picker("Fruit", selection: $selectedFruit) {
        ForEach(Fruit.allCases) { fruit in
          Text(fruit.rawValue)
            .tag(fruit) //<<追加
        }
      }
      Text("選択: \(selectedFruit.rawValue)")
    }
  }
}

CaseIterable - すべての値にコレクションを提供する型
allCases - すべてのコレクションにアクセスできる

2. SegmentedPickerStyle()

image

ピッカーのスタイルを変更するには.pickerStyle()を追加するだけです。公式ドキュメントでcapitalizedというもの使われていたので真似して追加しています。

struct ContentView: View {
  enum Fruit: String, CaseIterable, Identifiable {
    case Apple
    case Orange
    case Grape
    
    var id: String { self.rawValue }
  }
  @State private var selectedFruit = Fruit.Apple
  
  var body: some View {
    VStack {
      Picker("Fruit", selection: $selectedFruit) {
        ForEach(Fruit.allCases) { fruit in
          Text(fruit.rawValue)
            .tag(fruit)
        }
      }
      .pickerStyle(SegmentedPickerStyle()) //<<追加
      Text("選択: \(selectedFruit.rawValue)")
        .padding()
    }
  }
}

capitalized - 単語の頭文字を大文字に変換

3. MenuPickerStyle()

image

クリックでメニューが表示されるスタイル

.pickerStyle(MenuPickerStyle())

4. NavigationViewとFormとPicker

image

NavigationViewFormの中にPickerを追加すると画像のようなスタイルに自動で変更されます。

struct ContentView: View {
  enum Fruit: String, CaseIterable, Identifiable {
    case Apple
    case Orange
    case Grape
    
    var id: String { self.rawValue }
  }
  @State private var selectedFruit = Fruit.Apple
  
  var body: some View {
    NavigationView {
      Form {
        Picker("Fruit", selection: $selectedFruit) {
          ForEach(Fruit.allCases) { fruit in
            Text(fruit.rawValue)
              .tag(fruit)
          }
        }
        Text("選択: \(selectedFruit.rawValue)")
      }
      .navigationTitle("Fruit")
    }
  }
}

Picker | Apple Developer Documentation