| < How to set the background color of list rows using listRowBackground() | How to create expanding lists > |
How to create grouped and inset grouped lists
Updated for Xcode 13.0
Updated for iOS 15
SwiftUI’s List views have a listStyle() modifier to control how the list looks, and there are two options you’re likely to want: .grouped (or GroupedListStyle() for Xcode 12) to get the old-style grouping of items, and .insetGrouped (or InsetGroupedListStyle() for Xcode 12) to get the newer style grouping of items.
For example, this defines an example row and places it inside a grouped list:
struct ExampleRow: View {
var body: some View {
Text("Example Row")
}
}
struct ContentView: View {
var body: some View {
List {
Section(header: Text("Examples")) {
ExampleRow()
ExampleRow()
ExampleRow()
}
}
.listStyle(.grouped)
}
}
Download this as an Xcode project
Alternatively, this will create a list of 100 rows with the new inset style of grouping:
List(0..<100) { i in
Text("Row \(i)")
}
.listStyle(.insetGrouped) Download this as an Xcode project
Important: If you’re using Xcode 12 you need to use GroupedListStyle and InsetGroupedListStyle() rather than .grouped and insetGrouped.
SPONSORED Join a FREE crash course for iOS devs who want to become complete senior developers — from October 18th to 24th. Learn how to apply iOS app architecture patterns through a series of lectures and practical coding sessions.
Sponsor Hacking with Swift and reach the world's largest Swift community!
Similar solutions…
