【SwiftUI】InsetGroupedListStyle()을 사용하여 개폐 가능한 List를 만들고 싶습니다.

구현

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)
        }
    }
}

참고한 기사