7

I am making an app in SwiftUI with a sidebar that will display hierarchical information. In this case, I am displaying a list of projects and each project will have some to-do lists inside.

Screenshot of my example app

My problem as you can see above is that all the sections are expanded by default when the app is launched and I would like that they be collapsed by default instead. I am using List with Section(header:content:) for the sidebar and inside each section is an OutlineGroup.

Here is the code I used

// Data source for the list
class MyEnvironmentObject: ObservableObject {
    @Published var listItems = [
        ListItem(name: "Project 1", children: [
            ListItem(name: "List 1")
        ]),
        ListItem(name: "Project 2", children: [
            ListItem(name: "List 1"),
            ListItem(name: "List 2")
        ]),
        ListItem(name: "Project 3", children: [
            ListItem(name: "Example list")
        ])
    ]
}


struct ContentView: View {

    @EnvironmentObject var dataSource: MyEnvironmentObject
    
    func listItem(for item: ListItem) -> some View {
        Text(item.name)
    }
    
    var body: some View {
        NavigationView {
            List {
                ForEach(dataSource.listItems) { item in
                    Section(header: listItem(for: item)) {
                        OutlineGroup(item.children ?? [], children: \.children) {
                            listItem(for: $0)
                        }
                    }
                }
            }
            .listStyle(SidebarListStyle())
            Text("Hello world")
        }.navigationViewStyle(DoubleColumnNavigationViewStyle())
    }


}

I need a solution ideally using a List with Section, since I believe this is roughly what the built in apps like Files are using for their sidebar (which when opened have sections that are collapsed by default)

I was originally using this solution from SO which involved using DisclosureGroup but I ran into issues formatting on phone/compact display because the List was having dividers by default and I couldn't disable those. I then tried using a LazyVStack instead but it meant I wouldn't get a proper sidebar style especially on Big Sur. This solution is so close but I am not sure how to get the sections to collapse automatically, so help would be much appreciated! ^-^

themathsrobot
  • 581
  • 6
  • 20
  • Only DisclosureGroup at the moment gives possibility to control expand/collapse programmatically. – Asperi Nov 22 '20 at 10:04
  • @Asperi oh :( thank you for the heads up. It just has been quite frustrating going through so many different solutions, each having caveats big enough that they can’t be used. It doesn’t make sense to me why there’s a collapsible/expandable function for these sections when they are expanded by default, and I also don’t know how apps like the Files app are doing things. If I don’t find a solution I might have to rethink my navigation quite a bit :/ – themathsrobot Nov 22 '20 at 12:57
  • @themathsrobot what did you end up with? – xp. Oct 04 '21 at 22:50
  • @SirVon I was not able to fix this as far as I can remember. – themathsrobot Oct 06 '21 at 16:50
  • Making lists default collapsed/expanded—and programmatically collapsing/expanding—will soon be native to iOS 17 and macOS 14. Check out [Karin Prater's demo here](https://youtu.be/8n2mVTFwgcw?t=570) at timestamp 9:30. – elbowlobstercowstand Jun 30 '23 at 06:13

0 Answers0