How it works
GroupedListStyle is a concrete list style that arranges a List's rows into visually distinct sections, each set apart by inset spacing and a section header. Reach for it when your list is organized into logical groups — such as settings categories or related records — and you want the platform's grouped presentation rather than the default plain appearance. You apply it by passing an instance to the listStyle(_:) modifier, which propagates the style to the enclosing list.
Construct the style with GroupedListStyle()
GroupedListStyleconforms toListStyleand is created with its no-argument initializer; it carries no configuration of its own. You instantiate it inline at the point where you set the style, as inGroupedListStyle().Apply it through listStyle(_:)
The
listStyle(_:)modifier takes anyListStylevalue and sets it on theListin its subtree. Attaching.listStyle(GroupedListStyle())to theListswitches that list from the default style to the grouped presentation.Provide rows in Section groups
Grouped styling is most meaningful when rows are partitioned into sections, since
GroupedListStylerenders eachSectionas a separated block with its header. Here theListholds an"Account"section and a"Support"section, each wrappingLabelrows likeLabel("Profile", systemImage: "person").Read the section headers
A
Section's title becomes a header thatGroupedListStyledisplays above the group, reinforcing the visual grouping. The strings"Account"and"Support"supply those headers for the two blocks.
GroupedListStyle() in the .listStyle(...) call with PlainListStyle() and compare how the section separation and inset spacing change.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 GroupedListStyleDemo: View {
var body: some View {
List {
Section("Account") {
Label("Profile", systemImage: "person")
Label("Privacy", systemImage: "lock")
}
Section("Support") {
Label("Help", systemImage: "questionmark.circle")
Label("Contact Us", systemImage: "envelope")
}
}
.listStyle(GroupedListStyle())
}
}