[SwiftUI] SwiftUI の List でも、複数選択だけでなく、単数選択もできます

SwiftUI の List は、複数選択しかできないと思っていたのですが、いつのまにか単数選択もできるようになっていました。

[SwiftUI] SwiftUIのListでは、2020.Mar時点で、複数選択しかできない

[SwiftUI] SwiftUI の List で selection が有効にならないときにチェックすること

Sponsor Link

List が持つ選択関連の API

セレクションの Set を渡す API 。なので、当然、複数選択になります。（新しい要素を選択しても、以前から選択されている要素は選択されたまま）

example code


init(selection: Binding<Set<SelectionValue>>?, content: () -> Content)

init(selection: Binding<Set<SelectionValue>>?, content: () -> Content)

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

先の記事を書いたときには、このインターフェースしかなかったのですが、調べてみたら増えてました。

example code


init(selection: Binding<SelectionValue?>?, content: () -> Content)

init(selection: Binding<SelectionValue?>?, content: () -> Content)

リストの要素を選択要素として渡す API 。新しい要素を選択すると、先に選択されていた要素は、非選択になります。optional で保持するので、１つの要素も選択されていない状態を作ることも可能。

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

ただ、なにも選択されていない状況が起こり得るので、確実に選択して欲しいときは工夫が必要。

サンプルコード

以下のコードで動作を確認することができます。

example code


//
//  ContentView.swift
//  SelectionList
//
//  Created by Tomoaki Yagishita on 2020/05/24.
//  Copyright © 2020 SmallDeskSoftware. All rights reserved.
//

import SwiftUI

struct ContentView: View {
    @State var datas = ["item1", "item2", "item3"]
    @State var itemsSelection:Set<String> = Set<String>()
    @State var itemSelection:String?

    var body: some View {
        VStack {
            GroupBox(label: Text("Multiple Selection")) {
                List(selection: $itemsSelection, content: {
                    ForEach(datas, id: \.self) { str in
                        Text("\(str)")
                    }
                } )
                .environment(\.editMode, .constant(.active))
            }
            GroupBox(label: Text("Single Selection")) {
                List(selection: $itemSelection) {
                    ForEach(datas, id: \.self) { str in
                        Text("\(str)")
                    }
                }
                .environment(\.editMode, .constant(.active))
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

// ContentView.swift

// SelectionList

// Created by Tomoaki Yagishita on 2020/05/24.

import SwiftUI

struct ContentView: View {

@State var datas = ["item1", "item2", "item3"]

@State var itemsSelection:Set<String> = Set<String>()

@State var itemSelection:String?

var body: some View {

VStack {

GroupBox(label: Text("Multiple Selection")) {

List(selection: $itemsSelection, content: {

ForEach(datas, id: \.self) { str in

Text("\(str)")

}

} )

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

}

GroupBox(label: Text("Single Selection")) {

List(selection: $itemSelection) {

ForEach(datas, id: \.self) { str in

Text("\(str)")

}

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

}

struct ContentView_Previews: PreviewProvider {

static var previews: some View {

ContentView()

}

アプリ動作イメージ

上にあるリストは、複数選択可能ですので、クリックするごとに、各項目の選択/非選択が切り替わります。

下側のリストは、単数選択ですので、要素をクリックすると、それまで選択されていた要素の選択が解除されます。すでに選択されている要素をクリックすると、選択が解除され、リストとして、選択された要素がない状態になります。

API の availability としては、iOS13 〜となっていますので、ドキュメントに記載がないだけで当初から使うことができたのかもしれません。

当時は、必要があったので、自分で作ってしまいましたが、置き換えようかと思います。

SelectableList on Github

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

Sponsor Link

List が持つ選択関連の API

サンプルコード

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル