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:
How do I make the list in the first disclosure group only occupy the amount of three rows?
Of course, soon after, I found a solution, I shouldn't use a DisclosureGroup
but expandable Section
s 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: