跳转至
Structure

Section

A container that groups views.

Declaration

struct Section<Parent, Content, Footer>

Overview

Use Section inside of List and Form to visually separate sections of content.

Here's a Section in a List:

struct ContentView: View {
    var body: some View {
        List {
            Section {
                Text("I'm in the first 🥇 section")
                Text("Number 1️⃣")
            }
            Section {
                Text("Second is the best 🥈")
                Text("Indeed✌️")
            }
        }
    }
}
A white view showing a plain list with two sections, each with two text views.

And, for comparison, a Form:

struct ContentView: View {
    var body: some View {
        Form {
            Section {
                Text("I'm in the first 🥇 section")
                Text("Number 1️⃣")
            }
            Section {
                Text("Second is the best 🥈")
                Text("Indeed✌️")
            }
        }
    }
}
A white view showing a form with two sections, each with two text views.

You can also (optionally) add header and footer content to a Section:

struct ContentView: View {
    var footer: some View {
        Text("This is a disclaimer about section number 2. Use at your own risk.")
    }

    var body: some View {
        Form {
            Section(header: Text("Section #1")) {
                Text("I'm in the first 🥇 section")
                Text("Number 1️⃣")
            }
            Section(header: Text("Section #2"), footer: footer) {
                Text("Second is the best 🥈")
                Text("Indeed✌️")
            }
        }
    }
}
A white view showing a form with two sections, each with a header reading "Section #_" and two text views, and the second with a footer in small gray lettering reading "This is a disclaimer about section number 2. Use at your own risk."

You can style a List, and the Sections will automatically get styled accordingly.

struct ContentView: View {
    var footer: some View {
        Text("This is a disclaimer about section number 2. Use at your own risk.")
    }

    var body: some View {
        List {
            Section(header: Text("Section #1")) {
                Text("I'm in the first 🥇 section")
                Text("Number 1️⃣")
            }
            Section(header: Text("Section #2"), footer: footer) {
                Text("Second is the best 🥈")
                Text("Indeed✌️")
            }
        }
        .listStyle(InsetGroupedListStyle()) //Try changing this to SidebarListStyle()
    }
}
A white view showing an inset grouped list split into two sections, each with a header reading "Section #_" and two text views, and the second with a footer in small gray lettering eading "This is a disclaimer about section number 2. Use at your own risk."

Beyond List and Form, the four lazy layout elements also support Section:

They even enable you to pin the headers and footers as you scroll using PinnedScrollableViews. See those pages for more.

Availability

iOS 13.0+

macOS 10.15+

tvOS 13.0+

watchOS 6.0+

Topics


Instance Property

internalBody The child view displayed in the Section.


Initializer

init(content:) Initialize a Section with specified content.

init(footer:content:) Initialize a Section with an explicit footer and content.

init(header:content:) Initialize a Section with an explicit header and content.

init(header:footer:content:) Initialize a Section with an explicit header, footer, and content.


Type Alias

Body The type of view representing the body of this view.