How to add sections to a list 관련

SwiftUI by Example

---

Back to Home

---

How to add sections to a list | SwiftUI by Example

---

How to add sections to a list

Updated for Xcode 15

New in iOS 15

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, we could create a row that holds task data for a reminders app, then create a list view that has two sections: one for important tasks and one for less important tasks.

Here's how that looks:

struct TaskRow: View {
    var body: some View {
        Text("Task data goes here")
    }
}

struct ContentView: View {
    var body: some View {
        List {
            Section(header: Text("Important tasks")) {
                TaskRow()
                TaskRow()
                TaskRow()
            }

            Section(header: Text("Other tasks")) {
                TaskRow()
                TaskRow()
                TaskRow()
            }
        }
    }
}

Download this as an Xcode project

A list with two sections, with headers “Important Tasks” and “Other Tasks” respectively in all caps.

You can also add footer text to sections, like this:

List {
    Section(header: Text("Other tasks"), footer: Text("End")) {
        Text("Row 1")
        Text("Row 2")
        Text("Row 3")
    }
}

Download this as an Xcode project

A list section with header “Other Tasks” in all caps, and footer “End”.

By default your section headers will match the default iOS style, but you can request larger, bolder section text using the headerProminence() modifier and specifying .increased, like this:

List {
    Section(header: Text("Header")) {
        Text("Row")
    }
    .headerProminence(.increased)
}
.listStyle(.insetGrouped)

Download this as an Xcode project

A list with header text “Header” in large, bold, print.

Similar solutions…

Breaking forms into sections | SwiftUI by Example

---

Breaking forms into sections

Building a menu using List | SwiftUI by Example

---

Building a menu using List

How to add custom swipe action buttons to a List row | SwiftUI by Example

---

How to add custom swipe action buttons to a List row

How to add a badge to TabView items and List rows | SwiftUI by Example

---

How to add a badge to TabView items and List rows

Composing views to create a list row | SwiftUI by Example

---

Composing views to create a list row