[SwiftUI] Listでselectionを有効にする方法

SwiftUI

List は非常に良く出来たビューなのですが、.environment との関係に気づかないと困ることがあります。今回は、editMode との関係を説明します。
SwiftUI[SwiftUI] SwiftUI の List で selection が有効にならないときにチェックすること

Listで要素を選択させたいとき

SwiftUI の List のイニシャライザに選択を表す変数を渡すことができるので、以下のように書くと、選択が変数に反映されるハズです。

example code

struct ContentView: View {
    @State var datas = ["item1", "item2", "item3"]
    @State var itemSelection:String?

    var body: some View {
        List(selection: $itemSelection) {
            ForEach(datas, id: \.self) { str in
                Text("\(str)")
            }
        }
    }
}

unable To Select items

のはずなのですが、上記のコードではいくらやってもリストの要素を選択できるようになりません。

.editModeを、active にする必要がありました

.environment モディファイアを使用して、editMode を active にする必要があります。

コード

.environment(\.editMode, .constant(.active))

Able to select item in list

全体のコードは、以下のようになります。

コード

struct ContentView: View {
    @State var datas = ["item1", "item2", "item3"]
    @State var itemSelection:String?

    var body: some View {
        List(selection: $itemSelection) {
            ForEach(datas, id: \.self) { str in
                Text("\(str)")
            }
        }
        .environment(\.editMode, .constant(.active))
    }
}

まとめ: List で セレクションを可能にする方法

List で セレクションを可能にする方法
  • .editMode を .active にする
  • 引数の selection は、Binding<Set<>?> にすると複数選択でき、Binding<?>で単数選択となる
SwiftUI[SwiftUI] SwiftUI の List でも、複数選択だけでなく、単数選択もできます

なぜ、ハマりやすいか

似たような UI として、Picker がありますが、Picker には、.editMode は不要です。
途中まで、Picker を使っていたのを List に切り替えると、.editMode の必要性に気づかず、悩むことになります。

Picker のようなユーザーとのやり取りを前提としたコンポーネントと、List のように汎用に作られたコンポーネントとの違いに気をつける必要があります。

説明は以上です。
不明な点やおかしな点ありましたら、ご連絡いただけるとありがたいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です