listmacosswiftuidisclosuregroup

List in DisclosureGroup uses more height than number of items


I am trying to populate a right sidebar in my macOS app. And like in Xcode, I would like to use disclosure groups.

This is my first attempt:

import SwiftUI

struct TestView: View {
    var items1: [String] = ["One", "two", "three"]
    var items2: [String] = ["Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten"]

    var body: some View {
        DisclosureGroup("one") {
            List(items1, id: \.self) { item in
                Text(item)
            }
        }
        .padding()

        DisclosureGroup("two") {
            List(items2, id: \.self) { item in
                Text(item)
            }
        }
        .padding()

        Spacer()
    }
}

What happens when I click the first chevron, it pushes the second list all the way to the bottom of the view, even though there are only three items in the first list. Adding a Spacer did not help.

Screenshot:

enter image description here

How do I make the list in the first disclosure group only occupy the amount of three rows?


Solution

  • Of course, soon after, I found a solution, I shouldn't use a DisclosureGroup but expandable Sections and .listStyle(.sidebar):

    struct TestView: View {
        @State private var isExpandedOne: Bool = false
        @State private var isExpandedTwo: Bool = false
    
        var items1: [String] = ["One", "two", "three"]
        var items2: [String] = ["Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten"]
    
        var body: some View {
            List {
                Section(isExpanded: $isExpandedOne, content: {
                    ForEach(items1, id: \.self) { item in
                        Text(item)
                    }
                },
                header: {
                    Text("One")
                })
                Section(isExpanded: $isExpandedTwo, content: {
                    ForEach(items2, id: \.self) { item in
                        Text(item)
                    }
                },
                header: {
                    Text("Two")
                })
            }
            .listStyle(.sidebar)
        }
    }
    

    Result:

    enter image description here