Section in SwiftUI

by

Section is a container that organizes and groups views within a list or form. It provides a way to structure your layout with headers, footers, and dividers between items. Section is most commonly used in List and Form components, making it ideal for displaying grouped data or categorized settings.

Basic Structure

A basic Section consists of an initializer that includes the section’s content, and it can optionally include header and footer views.

Section {
    // Content
} header: {
    // Optional header
} footer: {
    // Optional footer
}

Simple Example

Here’s a simple example of a Section in a List.

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            Section(header: Text("Fruits")) {
                Text("Apple")
                Text("Orange")
                Text("Banana")
            }

            Section(header: Text("Vegetables")) {
                Text("Carrot")
                Text("Broccoli")
                Text("Spinach")
            }
        }
    }
}

In this example:

  • The List has two sections: “Fruits” and “Vegetables.”
  • Each section has a header (Text view), and it contains multiple items (Text views) within it.

Section with Footer

You can add a footer to a section to provide additional information or context for that section.

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            Section(header: Text("Fruits"), footer: Text("A variety of fruits.")) {
                Text("Apple")
                Text("Orange")
                Text("Banana")
            }
        }
    }
}

In this example, the footer “A variety of fruits.” is displayed below the items in the “Fruits” section.

Section in Form

Section is also frequently used in Form, which is useful for organizing fields, toggles, and controls in a settings or input form.

import SwiftUI

struct ContentView: View {
    @State private var notificationsEnabled = true
    @State private var username = ""

    var body: some View {
        Form {
            Section(header: Text("Profile")) {
                TextField("Username", text: $username)
            }

            Section(header: Text("Settings")) {
                Toggle("Enable Notifications", isOn: $notificationsEnabled)
            }
        }
    }
}

Here:

  • The form has two sections: one for the “Profile” with a TextField and one for “Settings” with a Toggle.

Custom Headers and Footers

In addition to text headers, you can customize headers and footers with more complex views, such as images, icons, or custom layouts.

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            Section(
                header: HStack {
                    Image(systemName: "star.fill")
                    Text("Favorites")
                        .font(.headline)
                },
                footer: Text("End of favorites list.")
            ) {
                Text("Item 1")
                Text("Item 2")
            }
        }
    }
}

In this example:

  • The section header is a HStack that contains an image and text, giving it a custom look.
  • The footer provides a simple text indicating the end of the list.

Collapsible Sections (iOS 15+)

Starting with iOS 15, you can make sections collapsible in List by enabling ListStyle(.insetGrouped), which will show sections as collapsible groups.

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            Section("Favorites") {
                Text("Item 1")
                Text("Item 2")
            }
            
            Section("Recently Added") {
                Text("Item 3")
                Text("Item 4")
            }
        }
        .listStyle(.insetGrouped)
    }
}

When using .insetGrouped style, sections can collapse automatically in a grouped appearance.

Using Sections in LazyVStack

Sections can also be used in a LazyVStack, such as in a ScrollView, which allows for more flexible and custom scrolling layouts.

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView {
            LazyVStack(alignment: .leading, spacing: 10) {
                Section(header: Text("Popular Items")) {
                    Text("Item A")
                    Text("Item B")
                }
                Section(header: Text("New Arrivals")) {
                    Text("Item C")
                    Text("Item D")
                }
            }
            .padding()
        }
    }
}

This example shows a vertically scrolling view with two sections that are part of a LazyVStack.

Section is a highly useful container in SwiftUI for organizing and structuring grouped content, especially within List and Form views. It adds headers and footers to improve clarity and organization and works well with built-in and custom views.

  • Header and Footer: Each section can have optional headers and footers.
  • List and Form Use: Commonly used within lists and forms for a structured layout.
  • Customizable: Headers and footers can contain complex views, offering more control over appearance.

Leave a Reply