はじめに
Listには色々種類がありますが、中でもInsetGroupedListStyle()が気に入っています。
他にどんなUIのListがあるのかは、「【SwiftUI】Listの使い方」とかを確認ください。
SwiftUIで実装する上でいつも参考にさせていただいてます。
今回は、UIはInsetGroupedListStyle()なのですが、SidebarListStyle()のように開閉できるListを実装したかったので、それを紹介します。
SidebarListStyle()をそのまま使用するとセルの右にchevronが存在すると思うのですが、そのアイコンや挙動もカスタマイズしたかったので、結局InsetGroupedListStyle()を使用した実装になりました。
成果物
以下ができます。
- Sectionを押下した時に開閉する
- 開いているときと閉まっている時で、表示するアイコン（矢印）を変更する
- 開いているときと閉まっている時で、Section下の（コード上だとSectionの中になりますが）線の表示を切り替える
動画で見たい場合は、以下のGithubリポジトリで公開しているので、そのREADMEを確認ください。
実装
struct ContentView: View {
// テスト用データ（APIから取得したデータを格納したり、、今回は辞書を使っているので順番が保証されないのに注意）
private let testData = ["食べ物": ["明太子パスタ", "ショートケーキ", "プロシュート", "パウンドケーキ"], "飲み物": ["コーラ", "ルイボスティー"]]
// 選択されたSectionがどれかを格納しておくためのSet
@State private var selection: Set<String> = []
var body: some View {
let keys: [String] = testData.map { $0.key }
let values: [[String]] = keys.compactMap { testData[$0] }
VStack {
List {
ForEach(keys.indices) { keyIndex in
Section(header: sectionHeader(title: keys[keyIndex], isExpanded: self.selection.contains(keys[keyIndex]))) {
if self.selection.contains(keys[keyIndex]) {
ForEach(values[keyIndex].indices) { valueIndex in
Text(values[keyIndex][valueIndex])
.foregroundColor(Color.black)
}
}
}
}
}
.listStyle(InsetGroupedListStyle())
}
}
}
extension ContentView {
private func sectionHeader(title: String, isExpanded: Bool) -> some View {
Button(action: {self.selectDeselect(selectedSection: title)}) {
VStack {
HStack {
Text(title)
Spacer()
Image(systemName: isExpanded ? "chevron.up" : "chevron.down")
}
if !isExpanded {
Divider()
} else {
Divider()
.frame(height: 0)
}
}
}
.foregroundColor(Color.gray)
}
// Sectionが押下された時に、Setの中身を変更するメソッド
private func selectDeselect(selectedSection: String) {
if selection.contains(selectedSection) {
selection.remove(selectedSection)
} else {
selection.insert(selectedSection)
}
}
}
コメントにも書いてますが、今回は表示するデータの格納する型が、Dictionaryなので順番は保証されていないです。
順番を保証したい場合は、別のデータ型を使用しないといけないですが、今回はサンプルなのでご了承。。
Set型を準備して、そこに選択されたSectionの文字列を保持しています。
今回は「食べ物」「飲み物」とかが入ってますが、多分IDとかもっと一意っぽい値の方が良いとは思います。
参考にした記事
終わりに
まだまだSwiftUI勉強中の身なので、実はSidebarListStyle()を使用してもっと上手くできるのかもしれないです。より良い方法をご存知の方、ぜひコメントで教えてください！ 