How to remove space before SwiftUI List Sections?

Question

Created Jun ’23

Replies 4

Boosts 0

Views 5.9k

Participants 9

I would like to use the built in SwiftUI List and Sections but with all the style and space removed (so I can do this myself). In particular I want the sticky section headings. However, there is always a small space above the sections that I can't remove whatever I do. I am aware there used to be a fix <iOS15, but I can't find a way for iOS16.

Here is some example code:

struct ContentView: View {
    var body: some View {
        List {
            ForEach(0...10, id: \.self) { value in
                Section {
                    ForEach(0...10, id: \.self) { innerValue in
                        Text("List item \(innerValue)")
                    }
                } header: {
                    Text("Section \(value)")
                        .frame(height: 50)
                        .frame(maxWidth: .infinity)
                        .background(Color(.systemGray6))
                }
            }
            .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
        }
        .listStyle(.plain)
        .clipped()
    }
}

Screenshot 2023-06-09 at 18.24.38.png

As you can see in this screenshot, I get the nice sticky header, but I get an annoying space between all of the sections, which I want to remove.

Boost

Answer 1

BabyJ OP

Jun ’23

In iOS 17, there are these two new modifiers which let you customise the spacing between list sections:

listSectionSpacing(_:) with CGFloat
listSectionSpacing(_:) with ListSectionSpacing

In your case you can apply .listSectionSpacing(0) to your List.

Note: this is only available from iOS 17.

2

Answer 2

swiftuiforever OP

Jun ’23

struct ContentView: View {
    
    var body: some View {
        ScrollView {
            LazyVStack(alignment: .leading, spacing: 0, pinnedViews: [.sectionHeaders], content: {
                ForEach(0..<10) { section in
                    Section {
                        ForEach(0..<10) { item in
                            VStack(alignment: .leading, spacing: 0) {
                                Text("List Item \(item)")
                                    .frame(minHeight: 50)
                                Divider()
                            }
                            .padding(.leading)
                        }
                    } header: {
                        Text("Section \(section)")
                            .bold()
                            .frame(height: 50)
                            .frame(maxWidth: .infinity)
                            .background(Color(.systemGray6))
                    }
                }
            })
        }
        .clipped()
    }
}

2

Answer 3

althoff OP

Dec ’23

The most effective way is to just use:

        .contentMargins(.vertical, 0)

.contentMargins(.horizontal, 0) is also available and they both work great.

4

Answer 4

devise OP

Mar ’24

Neither .contentMargins nor .listSectionSpacing worked for me. No visible change.

1