How it works
A List is a container that presents rows of data arranged in a single, scrolling column. It's the standard way to build the table- and settings-style screens common across iOS and macOS, handling scrolling, row separators, selection, and platform-appropriate styling so you don't have to assemble that behavior yourself. Reach for List whenever you have a collection of items to display as discrete, interactive rows — and prefer it over a ScrollView of stacked views when you want built-in list affordances like sections, swipe actions, and adaptive insets.
Build rows from static or dynamic content
Listaccepts a view builder whose contents become its rows; each top-level view inside the closure is laid out as one row. Here the closure produces rows for each grocery, so everyLabelrendered inside becomes a separate, separated row in the list.Generate rows over a collection with ForEach
To turn a collection into rows, nest a
ForEachinside theListand give it an identity so SwiftUI can track each row across updates. The example iteratesgrocerieswithid: \.self, producing one row per string in the array without you writing out each row by hand.Group rows into labeled sections
A
Listcan organize its rows intoSectionviews, each with an optional header that the list styles as a group heading. Wrapping the rows inSection("Groceries")collects the items under a titled group, whichListrenders with the inset, grouped appearance the platform expects.Style row content with list-aware views
Views placed in a row adapt to the list's layout —
Label, for instance, pairs text with a leading icon and aligns naturally within the row's content margins. EachLabel(item, systemImage: "cart")fills a row with a title and SF Symbol whileListsupplies the separators and spacing around it.Adjust presentation with a list style
Apply the
.listStyle(_:)modifier to theListto switch between presentations such as.plain,.grouped,.insetGrouped, or.sidebarwithout changing the row content. The example relies on the platform default, but attaching a style to theListlets you control how sections and separators are drawn.
Section("Pantry") { ... } alongside the existing Section("Groceries") inside the List to watch it space the two groups apart with their own headers.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 ListDemo: View {
let groceries = ["Apples", "Bread", "Coffee", "Eggs"]
var body: some View {
List {
Section("Groceries") {
ForEach(groceries, id: \.self) { item in
Label(item, systemImage: "cart")
}
}
}
}
}