How to add sections to a list
Fully updated for Xcode 11 GM
SwiftUI’s list view has built-in support for sections and section headers, just like UITableView in UIKit. To add a section around some cells, start by placing a Section around it, optionally also adding a header and footer.
As an example, here’s a row that holds task data for a reminders app:
struct TaskRow: View {
var body: some View {
Text("Task data goes here")
}
}What we want to do is create a list view that has two sections: one for important tasks and one for less important tasks. Here’s how that looks:
struct ContentView: View {
var body: some View {
List {
Section(header: Text("Important tasks")) {
TaskRow()
TaskRow()
TaskRow()
}
Section(header: Text("Other tasks")) {
TaskRow()
TaskRow()
TaskRow()
}
}
}
}You can also add footer text to sections, like this:
Section(header: Text("Other tasks"), footer: Text("End")) {
TaskRow()
TaskRow()
TaskRow()
}LEARN SWIFTUI FOR FREE I have a massive, free SwiftUI video collection on YouTube teaching you how to build complete apps with SwiftUI – check it out!
Similar solutions…
