20

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

2
  • 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. Commented Dec 17, 2021 at 16:06
  • Putting the List inside the VStack makes it collapsable. Commented Sep 13, 2022 at 13:10

5 Answers 5

45

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
Sign up to request clarification or add additional context in comments.

3 Comments

This is not working if the list is embedded in a NavigationView
@Daniel It works fine for list embedded in NavigationView. I verified in XCode 13.2 and iOS 15.2.
Works for me, Xcode 14.1 (14B47b)
8

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)

1 Comment

Thanks for pointing that out. Will be really hard to find out why its not working anymore.
3

Just using the SidebarListStyle in listStyle modifier

.listStyle(SidebarListStyle())

3 Comments

This is not working if the list is embedded in a NavigationView
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)
This one is working out great for my needs: ie exactly the opposite of the OP 😃 making a list collapsible. Also, I'd like to point out that none of the suggestions in other answer can work if not applied to List{}.
3

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.

Comments

1

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.