Search code examples
swiftuiswiftui-listswiftui-navigationview

Make List Sections non-collapsible in SwiftUI when embedded into a NavigationView SwiftUI


When I embed a List grouped into Sections into a NavigationView the section headers become collapsible. I'd like to keep them non-collapsible, just like when the List is not embedded into the NavigationView.

My current code (with the NavigationView):

import SwiftUI

struct MyGroup {
    var name:String, items:[String]
}

struct ContentView: View {
    var groups : [MyGroup] = [
        .init(name: "Animals", items: ["🐕","🐩","🐂","🐄","🐈","🦩","🐿","🐇"]),
        .init(name: "Vehicles", items: ["🚕","🚗","🚃","🚂","🚟","🚤","🛥","⛵️"])]
    
    var body: some View {
        NavigationView {
            VStack {
                List {
                    ForEach(groups, id: \.self.name) { group in
                        Section(header: Text(group.name)) {
                            ForEach(group.items, id:\.self) { item in
                                Text(item)
                            }
                        }
                    }
                }
            }.navigationTitle("collections")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

list with collapsible sections


Solution

  • It is default style applied, you can make it explicitly set for List like below (tested with Xcode 12 / iOS 14)

    demo

        List {
            ForEach(groups, id: \.self.name) { group in
                Section(header: Text(group.name)) {
                    ForEach(group.items, id:\.self) { item in
                        Text(item)
                    }
                }
            }
        }.listStyle(InsetGroupedListStyle()) // or GroupedListStyle