[SwiftUI] 非選択状態を許す Picker の使い方

環境＆対象

Picker

Picker は、ユーザーが 用意された選択肢から選択するための コントロールです。

Apple のドキュメントは、こちら。

以下の様な UI で選択肢から 選ぶことができます。

選ばないという選択

何かを選択しなければいけない時は、上記の Picker の使い方で良いのですが、ケースによっては、”選択しない” という選択をしたい時があります。

例えば、ラーメンのサイズを選択する場面で、”大盛り”, “ミニ” とあり、特に選んでいない時には “普通盛り” を意味しているということを表現したい時です。

実装する方法として、以下の２通りが考えられます。

1: “何も選んでいない” という選択肢を用意する
2: 選択肢を Optional とする

1 の場合は、”何もなし” を選択しているということです。上記の例では、”普通盛り” という選択肢を選んでいる状態にするということです。

2 の場合は、”選んでいるかどうか” も選択情報として持っていて、選んでいない時は、Optional.none を選択しているという状態です。

Swift でいうところの、変数が Optional であるかどうかが違いです。
1 の場合は、Optional ではない型の変数で 選択の値を保持し、その変数はつねに何らかの値を持っています。
2 の場合は、Optional な型の変数で選択の値を保持します。選択していない時には値はセットされていません。(変数は セットされていないという意味の .none を持っています)

以下では選択肢の情報は、基本的には String で持っていて、”Big”, “Mini”, (必要であれば “Standard”) で持つ様にしています。
選択された情報は、String 型の selection という変数で持つことにします。

上記で説明した様に、1と2 それぞれを実装するには、変数が String であるか Optional<String> (= String?) であるかが違いになります。

なお、String は Value-type なので、@State で持っています。

何も選んでいないという選択肢を用意する

1 の場合で実装すると、以下の様になります。

選択していないという状態は持てないので、常に 何かを選択している状態です。
変数 selection に初期値をセットすることで、選択の初期値を設定しておくことができます。

//
//  ContentView.swift
//
//  Created by : Tomoaki Yagishita on 2023/07/24
//  © 2023  SmallDeskSoftware
//

import SwiftUI

struct ContentView: View {
    @State private var selection: String = "Standard"
    var body: some View {
        VStack {
            Picker(selection: $selection, content: {
                Text("Big").tag("Big")
                Text("Mini").tag("Mini")
                Text("Standard").tag("Standard")
            }, label: {
                Text("Size")
            })
            Spacer()
            Text("value in selection: \(selection)")
        }
        .padding()
    }
}

画面下部に、変数 selection の値を表示していますが、何も選択していないという状態を持てませんので、初期値として、”Standard” という値を設定しています。

選択されていないという状態 Optional.none

2 の場合で実装すると、以下の様になります。

選択していない状態をユーザーにもわかる様にしないといけないので、” nothing selected” という選択肢を追加しています。
“選択していない” ということを明示するために、Standard とは表示していません。

//  ContentView.swift
//
//  Created by : Tomoaki Yagishita on 2023/07/24
//  © 2023  SmallDeskSoftware
//

import SwiftUI

struct ContentView: View {
    @State private var selection: String? = nil
    var body: some View {
        VStack {
            Picker(selection: $selection, content: {
                Text("nothing selected").tag(Optional.none)
                Text("Big").tag(Optional.some("Big"))
                Text("Mini").tag(Optional.some("Mini"))
            }, label: {
                Text("Size")
            })
            Spacer()
            Text("value in selection: \(selection ?? "nil")")
        }
        .padding()
    }
}

tag の中が すこし 複雑になっているのは、Picker の選択対象の型が、 String から String? (= Optional) になったからです。
tag の中を String 型のままにしておくと、選択できない 選択肢になってしまうので、注意が必要です。

なお、selection は、Optional<String> 型なので、何も設定していない状態として nil を持つことができます。初期値も nil としています。

まとめ

非選択状態を持つことができる Picker の使い方を説明しました。

Swift 言語の持つ Optional という特性を活かすのであれば、２つ目に紹介した方法で実装するのが 良い気がします。（最終的には、ケースバイケースです。）

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

SwiftUI おすすめ本

SwiftUI を理解するには、以下の本がおすすめです。

SwiftUI 徹底入門

＃ SwiftUI は、毎年大きく改善されていますので、少し古くなってしまいましたが、いまでも 定番本です。

Swift学習におすすめの本

詳解Swift

Swift の学習には、詳解 Swift という書籍が、おすすめです。

著者は、Swift の初期から書籍を出していますし、Swift の前に主力言語だった Objective-C という言語についても同様の書籍を出しています。

最新版を購入するのがおすすめです。

現時点では、上記の Swift 5 に対応した第５版が最新版です。

関連記事:

[SwiftUI] Picker/List と tag 指定 (nil 設定の方法) [SwiftUI] List’s selection and NavigationLink [SwiftUI] List の selection と NavigationLink [SwiftUI] 階層的プルダウンメニューを作る方法 (menu と Picker の比較から)