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

SwiftUI

     

TAGS:

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

[SwiftUI] SwiftUIのListでは、2020.Mar時点で、複数選択しかできない [SwiftUI] SwiftUIのListでは、2020.Mar時点で、複数選択しかできない
SwiftUI [SwiftUI] SwiftUI の List で selection が有効にならないときにチェックすること

List が持つ選択関連の API

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

example code


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

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

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

example code


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

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

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 = Set()
    @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

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

3 COMMENTS

たまごっち

初めまして、質問させてください。
複数選択ができるリストを作成しているのですが
複数選択した項目を結果として表示したい場合どうすればいいですか?
突然の質問大変申し訳ありませんが教えていただけると幸いです。
よろしくお願いします。

返信する
tyagishi

こんにちは、コメントありがとうございます。

「表示する」としてどのようなことをしたいのかによるかもしれませんが、選択された要素を Text で表示する例を作ってみました。

新しい記事として書いてみましたので、参考にしてみてください。こちらの記事です。

返信する
たまごっち

お返事ありがとうございます。
まさにTextとして表示したかったことです。
ありがとうございます。
参考にさせていただきます。
また質問させてください。

返信する

たまごっち へ返信する コメントをキャンセル

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