Pickerで​チェックボックスが​表示されない​バグ

2 min read
Swift
picker

Picker が正しく表示されない

Picker でチェックボックスが表示されないバグはstack overflowでも報告されていて、いろいろ解決法が載っていますが、この方法では解決しません。

バグについて

  • 選択しているにも関わらずチェックマークが表示されない
  • 選択範囲がおかしい
    • Form 内の Picker は全範囲にタップ判定があるのだが、このバグが発生するとラベルにしかタップ判定がない

バグが発生しないコード

以下のコードは普通に動作する。

import SwiftUI
 
struct ContentView: View {
    @State var selection: FruitType = .apple
    private var timers = Array(FruitType.allCases)
 
    var body: some View {
        NavigationView {
            Form {
                Picker(selection: $selection, label: Text("Select")) {
                    ForEach(fruits, id:\.rawValue) {
                        Text($0.rawValue)
                    }
                }
            }
            .navigationTitle("Picker")
        }
    }
}
 
enum FruitType: String, CaseIterable {
    case apple
    case orange
    case banana
}

バグを含むコード

以下のコードは実行すると Picker にバグが発生する。

import SwiftUI
 
struct ContentView: View {
    @State var selection: FruitType = .apple
    private var timers = Array(FruitType.allCases)
 
    var body: some View {
        NavigationView {
            Form {
                Picker(selection: $selection, label: Text("Select")) {
                    ForEach(fruits, id:\.rawValue) {
                        Text($0.rawValue)
                    }
                }
            }
            .navigationTitle("Picker")
        }
        .buttonStyle(PlainButtonStyle())
    }
}
 
enum FruitType: String, CaseIterable {
    case apple
    case orange
    case banana
}

バグの原因について

要するにNavigationViewに.buttonStyle(PlainButtonStyle())がかかっているとForm内のPickerの表示がおかしくなってしまう。

なので、.buttonStyle(PlanButtonStyle())をネストの浅いところに書いてしまうのは良くない。特に、WindowGroupに書くと全ビューにスタイルが適応されて便利なのだが、もしも Picker を利用するつもりであれば.buttonStyle()を書く場所はしっかりと考えたほうが良い。

::: tip おまけ

iOS 向けの Style は以下の三つが使えるが、DefaultButtonStyle以外はバグが発生します。

:::

バグ
PlainButtonStyle発生
DefaultButtonStyle発生しない
BorderlessButtonStyle発生
License under CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.en