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

Question

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

As of today it is not possible in iOS. Not even via UIKit. It is only possible with `.collapsible(false)` on macOS. File a bug with Apple if you want this to change in the future. — Daniel, Dec 17 '21 at 16:06

score 45 · Accepted Answer · edited Aug 23 '22 at 13:38

45

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

    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

edited Aug 23 '22 at 13:38

Martijn Pieters

1,048,767
296
4,058
3,343

answered Oct 14 '20 at 10:40

Asperi

228,894
20
464
690

1

This is not working if the list is embedded in a NavigationView – Daniel Dec 17 '21 at 15:59
1

@Daniel It works fine for list embedded in NavigationView. I verified in XCode 13.2 and iOS 15.2. – rayx Jan 17 '22 at 07:57
Works for me, Xcode 14.1 (14B47b) – sirATL Feb 27 '23 at 08:01

score 3 · Answer 2 · answered Jun 28 '21 at 06:30

3

Just using the SidebarListStyle in listStyle modifier

.listStyle(SidebarListStyle())

answered Jun 28 '21 at 06:30

Milad

63
8

1

This is not working if the list is embedded in a NavigationView – Daniel Dec 17 '21 at 15:59
This is funny because using .sidebar doesnt make it work, but it does what i want (remove the extra top space probably used for animation scrolling in grouping section headers) – chitgoks Sep 11 '22 at 00:48

score 3 · Answer 3 · answered Feb 17 '22 at 02:54

In case you're stumbling on this... The issue doesn't have anything to do with being embedded in a NavigationView as the OP and @Danial mentioned. It's because it's embedded in the the VStack at the first level of the NavigationView in the example code. Seems like a SwiftUI bug to me.

score 2 · Answer 4 · answered Jul 16 '23 at 16:27

2

As of iOS 17, Sections are no longer collapsible (on Xcode 15b2).

To enable collapse/expand behavior:

public init(isExpanded: Binding<Bool>, @ViewBuilder content: () -> Content, @ViewBuilder header: () -> Parent)

answered Jul 16 '23 at 16:27

AnupamChugh

1,779
1
25
36

Thanks for pointing that out. Will be really hard to find out why its not working anymore. – Tbi Jul 23 '23 at 13:17

score 0 · Answer 5 · answered Mar 30 '23 at 09:37

I just came across the same problem and none of the suggested solutions worked for me. And contrary to some comments, this is indeed related to Lists embedded inside NavigationViews as I could reproduce the problem even after removing my VStack. The only solution that worked for me was setting the navigationViewStyle to stack:

.navigationViewStyle(StackNavigationViewStyle())

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

5 Answers5

Linked