Reducing space between sections for grouped List in SwiftUI?

Question

I've been trying to reduce the space between sections in a list with the GroupedListStyle() applied without any luck.

Code from above screenshot:

struct ContentView: View {
    var body: some View {
        List {
            Section {
                Text("Hello, World!")
                Text("Hello, World!")
                Text("Hello, World!")
            }
            Section {
                Text("Hello, World!")
            }
            Section {
                Text("Hello, World!")
                Text("Hello, World!")

            }
        }.listStyle(GroupedListStyle())
    }
}

Any suggestions would be greatly appreciated.

Chronological

This is default layout. But possible solution was provided in Reduce Form spacing between sections SwiftUI. – Lactalbumin

I have same problem. Have you find any solution? – Ephah

Answer 1

iOS 13-15 List is UITableView (add code below in init):

UITableView.appearance().sectionFooterHeight = 0

iOS 16-17 List is UICollectionView (add code below in init):

var layoutConfig = UICollectionLayoutListConfiguration(appearance: .grouped)
layoutConfig.headerMode = .supplementary
layoutConfig.headerTopPadding = 0
layoutConfig.footerMode = .supplementary
let listLayout = UICollectionViewCompositionalLayout.list(using: layoutConfig)
UICollectionView.appearance().collectionViewLayout = listLayout

iOS 17: The previous solution still works, but there is a new method:

.listSectionSpacing(0)

Changes you apply to UITableView.appearance() and UICollectionView.appearance() will also have an effect on all others Lists in your app. But you can apply changes only for current List using swiftui-introspect with code above replacing UITableView.appearance() and UICollectionView.appearance() by tableView and collectionView

.introspectTableView { tableView in
    // code below
}

.introspectCollectionView { collectionView in
    // code below
}

Tell

None of this works for me. listSectionSpacing adds space between section title and section content, not between the sections. And headerMode supplementary actually crashes the app – Monogamy

.listSectionSpacing(10) was exactly what I was searching for. – Sharper

Answer 2

In iOS 17+ List has a modifier called listSectionSpacing which you can use to specify the gap

.listSectionSpacing(8)

Karoline

That's iOS 17+. Just saying. – Raspberry

Answer 3

You can add it outside the view like this

    struct ContentView: View {
        init() {
           UITableView.appearance().sectionFooterHeight = 0
        }

        var body: some View {}
    }

Connolly

Doesn't work on iOS15+ since UICollectionView is used under the hood now – Songful

Answer 4

I don't like this solution but I thought back to how UITableView works and guessed that it was probably the footer spacing causing this.

I added:

UITableView.appearance().sectionFooterHeight = 0

to the init of the view and that seems to have worked.

I am aware that this sets that appearance globally so potentially it will be good to reset that value when the view disappears.

Bibliopegy

How do you add this to the View? – Claypoole

You can put this in the init of the view. Although I have since found it much better to use the LazyVStack instead of a List. It isn't backed by UITableView so you don't have all of these problems. – Bibliopegy

Answer 5

You can use .listRowInsets() for your section and use a negative value for the bottom.

.listRowInsets(EdgeInsets(top: 0,leading: 0,bottom: -20,trailing: 0))

Rosemarie

This doesn't work – Furthermost

In my case it works. – Rosemarie

I tried it, and it doesn't. What's your min iOS sdk? – Furthermost

this changes row padding. Not section spacing. Only appears to work works in plain lists because they have a white background. – Dissociable