How it works
ListStyle is the protocol that describes how a list presents itself: the spacing of its rows, the treatment of its section headers, the inset and background behind its content, and the platform-idiomatic chrome that frames it all. Rather than configuring those details by hand on every list, you select a conforming style and let SwiftUI apply a coherent appearance for you. Reach for ListStyle when you want a list to read as plain, grouped, inset, or sidebar — switching between built-in looks without touching the list's structure or its data.
Apply a style with the listStyle(_:) modifier
You don't conform to ListStyle yourself; you choose a value of a conforming type and hand it to the listStyle(_:) modifier. The modifier attaches the style to the enclosing List and to any lists nested in its hierarchy. In the example,
.listStyle(.insetGrouped)is applied to theList, which selects the inset, grouped presentation for its rows.Pick a built-in conforming style
SwiftUI ships several types that conform to ListStyle — each a distinct visual language: plain, grouped, inset, inset-grouped, and sidebar among them. You refer to them through leading-dot shorthand on the modifier, so
.insetGroupedresolves to InsetGroupedListStyle. Swapping that single token is all it takes to move between looks.Let the style shape sections
Because the style owns header and grouping treatment, the way you structure content with
Sectionis interpreted by ListStyle rather than styled by you. TheSection("Fruits")andSection("Veggies")groups gain their inset cards, rounded corners, and header styling from the chosen.insetGroupedstyle — the same sections would render as flush, full-width rows under.plain.Keep row content style-agnostic
Rows describe their content, not their framing, so the list's contents stay the same across every style. The
Label("Apple", systemImage: "applelogo")rows declare text and a symbol; ListStyle decides their insets, separators, and backgrounds. This separation is what lets one style be substituted for another without editing a single row.
.listStyle(.insetGrouped) to .listStyle(.plain) and watch the inset section cards flatten into flush, full-width rows.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 ListStyleDemo: View {
var body: some View {
List {
Section("Fruits") {
Label("Apple", systemImage: "applelogo")
Label("Banana", systemImage: "leaf")
}
Section("Veggies") {
Label("Carrot", systemImage: "carrot")
}
}
.listStyle(.insetGrouped)
}
}