TechnologiesSwiftUILists and Collections

ListSectionSpacing struct

iOSmacOStvOSwatchOSvisionOS✓ renders

The spacing options between two adjacent sections in a list.

How it works

ListSectionSpacing describes how much vertical space a List places between its sections, letting you tune the rhythm of a sectioned list without resorting to custom insets or spacer rows. By default a list uses the platform's standard section gap; reach for ListSectionSpacing when that gap feels too loose or too tight for your layout — for example to pull grouped rows closer together in a dense settings-style screen. You apply it through the listSectionSpacing(_:) modifier, passing either a named spacing value or an explicit point value.

  1. Apply spacing with listSectionSpacing(_:)

    The listSectionSpacing(_:) modifier is where the value takes effect. Attach it to a List (or to an individual Section) and it sets the space inserted between that list's sections. In the example it hangs off the whole List, so the gap between the Inbox and Archive sections is what changes.

  2. Choose a semantic value: compact, default, or custom

    ListSectionSpacing exposes named values that adapt to the platform rather than hard-coding a number. ListSectionSpacing.compact requests the tightest standard gap, while ListSectionSpacing.default restores the system's normal spacing. The example uses ListSectionSpacing.compact to draw the two sections close together.

  3. Pass a precise gap with the point-value form

    When a named value isn't exact enough, listSectionSpacing(_:) also accepts a CGFloat, applying that many points between sections — listSectionSpacing(0) removes the gap entirely. This is the escape hatch from the semantic ListSectionSpacing.compact used here when you need a specific measurement.

  4. Understand the scope it governs

    The value only affects the spacing *between* sections, not the padding inside a Section or between individual rows. The two Section blocks — Inbox with its Text rows and Archive with its own — keep their internal layout; only the seam between them responds to the ListSectionSpacing value.

Try it — Change .listSectionSpacing(ListSectionSpacing.compact) to .listSectionSpacing(ListSectionSpacing.default) (or to a literal like .listSectionSpacing(40)) and watch the gap between the Inbox and Archive sections grow.

Example & preview

Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.

ListSectionSpacing.swift
struct ListSectionSpacingDemo: View {
    var body: some View {
        List {
            Section("Inbox") {
                Text("Mom")
                Text("Alex")
            }
            Section("Archive") {
                Text("Newsletter")
                Text("Receipts")
            }
        }
        .listSectionSpacing(ListSectionSpacing.compact)
    }
}
Live preview
Inbox Mom Alex Archive Newsletter Receipts
Inbox Mom Alex Archive Newsletter Receipts
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →