Section in SwiftUI: Was es ist, Abschnitte erstellen und gruppieren

Was ist Section in SwiftUI?

Section ist eine strukturelle SwiftUI-Komponente, die zum Gruppieren von Elementen in Form- und List-Containern entwickelt wurde. Im Gegensatz zu VStack oder HStack fügt Section systemeigene Abstände, eine Kopf- und Fußzeile sowie eine visuelle Hervorhebung der Gruppe in Form eines Blocks mit abgerundeten Ecken unter iOS hinzu.

Section ändert das Verhalten der Kindelemente nicht — sie organisiert nur ihre Darstellung. Alle Steuerelemente innerhalb von Section — Picker, Toggle, TextField — funktionieren wie gewohnt, sind aber visuell zu einer logischen Gruppe zusammengefasst. Dies ist besonders wichtig für Bildschirmformulare, bei denen der Benutzer sich schnell in der Dateneingabestruktur zurechtfinden muss.

Das System verwaltet automatisch die Abstände zwischen den Abschnitten: Der Abstand zwischen Sections unter iOS beträgt 16–20 Punkte, zwischen Elementen innerhalb einer Section 0 (Trennzeichen zwischen Zeilen). Der Entwickler kann diese Abstände nicht über Padding-Modifikatoren ändern — sie werden vom System gesteuert, um ein einheitliches Erscheinungsbild zu gewährleisten.

Kopf- und Fußzeile von Section

Section akzeptiert zwei optionale Parameter: header — den Titel der Gruppe, und footer — erklärenden Text unter der Gruppe. Die Kopfzeile wird über den Abschnittselementen in fetter Caption-Schrift angezeigt, die Fußzeile in kleinerer Schrift in Grau. Beide Parameter akzeptieren jede SwiftUI View, nicht nur Text.

Die Kopfzeile der Section hilft dem Benutzer zu verstehen, zu welcher Kategorie die Elemente der Gruppe gehören. Auf einem Einstellungsbildschirm etwa orientieren Kopfzeilen wie „Benachrichtigungen“, „Datenschutz“ und „Konto“ den Benutzer sofort. Die Fußzeile ist nützlich für Erklärungen: „Schalten Sie Benachrichtigungen während Besprechungen aus“ oder „Das Passwort muss mindestens 8 Zeichen enthalten.“ Die Fußzeile wird bei Bedarf automatisch auf mehrere Zeilen umgebrochen.

Section(
    header: Text("Account Security"),
    footer: Text("Use a strong password with at least 8 characters.")
) {
    SecureField("Current password", text: $currentPassword)
    SecureField("New password", text: $newPassword)
}

Im Beispiel hat Section die Kopfzeile „Account Security“ und eine Fußzeile mit Passwortsicherheitshinweisen. Der Benutzer sieht die Kopfzeile als Abschnittsbezeichnung, füllt zwei Felder aus und liest sofort die Warnung darunter. Diese Struktur verbessert die UX, da alle Informationen über den Abschnitt auf einem Bildschirm sind, ohne dass eine separate Hilfeseite aufgerufen werden muss.

Section innerhalb von Form und List

Section funktioniert sowohl innerhalb von Form als auch von List, aber die visuelle Darstellung unterscheidet sich. In Form wird Section als Block mit abgerundeten Ecken und systemeigenem Hintergrund angezeigt, der durch Abstände von benachbarten Abschnitten getrennt ist. In List kann Section den plain-Stil — ohne Hintergrund und abgerundete Ecken, oder inset-grouped — mit abgerundeten Blöcken ähnlich wie Form verwenden.

Die Wahl des Containers beeinflusst den Stil von Section. Wenn Sie eine Section mit demselben Inhalt in Form und List mit .insetGrouped-Stil platzieren, ist das Ergebnis identisch. Allerdings fügt Form standardmäßig systemeigene Abstände hinzu und verwendet den grouped-Stil, während List eine explizite Stilangabe über den Modifikator .listStyle(.insetGrouped) erfordert.

Um das gleiche Erscheinungsbild in List zu erzielen, verwenden Sie .listStyle(.insetGrouped). Dieser Stil imitiert das Aussehen von Form und eignet sich für Einstellungsbildschirme, die auf List basieren. Für Standarddatenlisten verwenden Sie .plain — ohne Abschnittshervorhebung, mit dünnen Trennlinien zwischen den Zeilen.

Dynamischer Inhalt mit ForEach

Section kann eine dynamische Anzahl von Elementen über ForEach enthalten. Dies ermöglicht die Erstellung von Gruppen mit sich wiederholenden Elementen, wobei die Kopf- und Fußzeile für die gesamte Gruppe erhalten bleibt. ForEach innerhalb von Section iteriert über eine Datensammlung und erstellt für jedes Element untergeordnete Views, ohne die Abschnittsstruktur zu beeinträchtigen.

Dynamische Abschnitte sind nützlich für Einstellungsbildschirme mit einer variablen Anzahl von Optionen: Liste der verfügbaren Sprachen, verbundene Geräte oder Push-Abonnements. Die Abschnittsüberschrift bleibt statisch, während der Inhalt je nach Daten variiert.

struct DynamicSectionView: View {
    let categories = ["Work", "Personal", "Finance", "Health"]
    @State private var selected = Set<String>()

    var body: some View {
        Form {
            Section(header: Text("Categories"),
                    footer: Text("Select your preferred categories")) {
                ForEach(categories, id: \.self) { category in
                    Toggle(category, isOn: Binding(
                        get: { selected.contains(category) },
                        set: { if $0 { selected.insert(category) }
                                     else { selected.remove(category) } }
                    ))
                }
            }

            Section {
                Text("Selected: \(selected.count) categories")
                    .foregroundStyle(.secondary)
            }
        }
    }
}

In diesem Beispiel generiert ForEach einen Toggle für jede Kategorie aus dem categories-Array. Die Kopf- und Fußzeile des Abschnitts werden einmal festgelegt und auf die gesamte Gruppe angewendet. Der zweite Abschnitt zeigt die Anzahl der ausgewählten Kategorien an — er ist nicht von ForEach abhängig und bleibt statisch. Dieser Ansatz ermöglicht flexible Formulare, bei denen Kopf- und Fußzeile eine Gruppe dynamischer Elemente kontextualisieren.

Section-Codebeispiele

Betrachten wir ein vollständiges Beispiel eines Profilbildschirms mit Section zur Datengruppierung. Das Formular enthält drei Abschnitte: Benutzerinformationen, Datenschutzeinstellungen und Statistiken. Jeder Abschnitt verwendet seine eigene Überschrift, und der letzte hat eine Fußzeile mit zusammenfassenden Informationen.

struct ProfileView: View {
    @State private var displayName = "Alex Johnson"
    @State private var bio = "iOS developer"
    @State private var isProfilePublic = true
    @State private var showEmail = false

    var body: some View {
        Form {
            Section(header: Text("Profile Info")) {
                TextField("Display name", text: $displayName)
                TextField("Bio", text: $bio, axis: .vertical)
                    .lineLimit(3)
            }

            Section(header: Text("Privacy")) {
                Toggle("Public profile", isOn: $isProfilePublic)
                Toggle("Show email", isOn: $showEmail)
                    .disabled(!isProfilePublic)
            }

            Section(header: Text("Stats"),
                    footer: Text("Last updated today at 2:30 PM")) {
                LabeledContent("Posts", value: "42")
                LabeledContent("Followers", value: "1,280")
                LabeledContent("Following", value: "346")
            }
        }
        .navigationTitle("Profile")
    }
}

Drei Section-Blöcke trennen klar die Funktionsbereiche: bearbeitbare Profilfelder, Datenschutzschalter und Statistiken. Der zweite Abschnitt demonstriert Validierung: Der Schalter „Show email“ ist deaktiviert, bis das Profil öffentlich ist. Die Fußzeile des dritten Abschnitts zeigt die letzte Aktualisierungszeit — ein Beispiel für die Verwendung einer Fußzeile für zusätzliche Kontextinformationen. LabeledContent ist eine Standard-SwiftUI-Komponente zur Anzeige von Schlüssel-Wert-Paaren in Form.

Section mit benutzerdefinierter Kopfzeile

Section(
    header: HStack {
        Image(systemName: "bell.fill")
            .foregroundStyle(.blue)
        Text("Notifications")
            .font(.headline)
    },
    footer: Text("Manage push and email alerts")
) {
    Toggle("Push notifications", isOn: $push)
    Toggle("Email notifications", isOn: $email)
    Stepper("Quiet hours: \(quietStart) — \(quietEnd)",
            value: $quietStart,
            in: 0...23)
}

Dieses Beispiel zeigt, dass header jede SwiftUI View sein kann. Die Verwendung von HStack mit Image und Text fügt ein Symbol neben der Kopfzeile hinzu und macht den Abschnitt visuell ausdrucksstärker. Benutzerdefinierte Kopfzeilen sind nützlich, um wichtige Abschnitte in der Benutzeroberfläche hervorzuheben: Benachrichtigungseinstellungen, kostenpflichtige Funktionen oder Abschnitte mit Warnungen. Allerdings wird von übermäßigem Gebrauch benutzerdefinierter Kopfzeilen abgeraten — 1–2 Abschnitte mit nicht standardmäßigem Stil pro Bildschirm sind ausreichend, um die Einheitlichkeit der Benutzeroberfläche zu wahren.