How it works
InsetGroupedListStyle is a concrete ListStyle that arranges a list's content into rounded, inset cards, with each Section appearing as its own grouped block separated from the edges of its container. It produces the familiar settings-screen appearance used throughout iOS, where related rows cluster together under a header and the whole group floats slightly in from the surrounding margins. Reach for it when you want a List to read as discrete, titled groups of options rather than a single edge-to-edge run of rows.
Apply the style with listStyle(_:)
A List adopts a particular appearance through the
.listStyle(_:)modifier, which takes any value conforming to ListStyle. Passing anInsetGroupedListStyle()instance switches the list from its platform default to the inset, grouped presentation. In the example,.listStyle(InsetGroupedListStyle())is attached to theList, and every section inside it is reshaped accordingly.Construct the style with its initializer
InsetGroupedListStyle is a value type you create with a plain, parameterless initializer:
InsetGroupedListStyle(). There are no options to configure on the style itself; the inset spacing, corner rounding, and grouping are determined by the system. You simply build the instance and hand it to.listStyle(_:).Let Section define each grouped block
The style draws one rounded, inset card per
Sectionin the list, so the way you group rows directly shapes the layout. Here the twoSectionvalues,"Account"and"Preferences", become two separate cards, and their string arguments render as the headers above each group.Place rows inside the sections
Whatever views you put inside each
Sectionbecome the rows within that card, inset from the card's edges and divided by hairlines. TheLabelrows such asLabel("Name", systemImage: "person")and theToggle("Notifications", isOn: .constant(true))are laid out as standard grouped rows by the style, with no per-row changes needed.Prefer the static listStyle shorthand
Because InsetGroupedListStyle is a standard style, SwiftUI also exposes it as the static member
.insetGrouped, so.listStyle(.insetGrouped)is equivalent to passingInsetGroupedListStyle(). The explicit initializer form shown in the example is the fully spelled-out version of that same call.
.listStyle(InsetGroupedListStyle()) to .listStyle(.plain) and watch the two cards collapse into a single edge-to-edge list, so you can see exactly what the inset grouping was adding.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.
struct InsetGroupedListStyleDemo: View {
var body: some View {
List {
Section("Account") {
Label("Name", systemImage: "person")
Label("Email", systemImage: "envelope")
}
Section("Preferences") {
Toggle("Notifications", isOn: .constant(true))
Label("Appearance", systemImage: "paintbrush")
}
}
.listStyle(InsetGroupedListStyle())
}
}