Form in SwiftUI: was es ist, Formularerstellung und -konfiguration

Was ist Form in SwiftUI?

Form ist ein spezialisierter SwiftUI-Container, der für die Erstellung von Eingabeformularen und Einstellungsbildschirmen entwickelt wurde. Es erbt das Verhalten von List, fügt aber plattformspezifische Stile hinzu: Unter iOS wird Form als gruppierte Tabelle mit abgerundeten Ecken der Abschnitte angezeigt; unter macOS erscheint es als Standard-Systemliste mit Kontrollkästchen und Steuerelementen.

Im Gegensatz zum manuellen Layout mit VStack und HStack arrangiert Form automatisch Abstände zwischen Elementen, fügt Trennlinien hinzu und passt sein Erscheinungsbild an das Systemthema an — hell oder dunkel. Der Entwickler beschreibt nur die logische Struktur: Section zum Gruppieren und Steuerelemente darin. Das Formular selbst entscheidet, wie Picker, Toggle oder Stepper auf einer bestimmten Plattform visuell angeordnet werden.

Form unterstützt alle standardmäßigen SwiftUI-Eingabeelemente: TextField für Text, SecureField für Passwörter, Picker für Listenauswahl, Toggle für Ein/Aus, Slider für Bereiche, Stepper für schrittweise Werte und DatePicker für Daten. Jedes Element erhält automatisch einen Stil, der den HIG (Human Interface Guidelines) von Apple auf der Zielplattform entspricht.

Form vs List: Container-Vergleich

Trotz ihrer optischen Ähnlichkeit lösen Form und List unterschiedliche Aufgaben. List ist ein universeller Container zur Anzeige von scrollbaren Datenlisten mit Wischaktionen und Zeilenbearbeitungsfunktionen. Form ist ein spezialisierter Container für Dateneingabe und Einstellungen, optimiert für Systemsteuerelement-Stile.

List eignet sich zur Anzeige dynamischer Daten: Nachrichten-Feeds, Chats, Produktkataloge. Form ist für statische Bildschirme mit einem vorhersagbaren Satz von Feldern gedacht: Benutzerprofil, App-Einstellungen, Registrierungsformular. Der Hauptunterschied: Form-Elemente können interaktive Steuerelemente sein, während List-Zeilen meist Daten anzeigen und auf Tippen mit Navigation oder Aktion reagieren.

Laut den Apple Human Interface Guidelines (2025) sollte Form für Einstellungs- und Eingabebildschirme verwendet werden, wenn sich 3 bis 20 Steuerelemente auf einem Bildschirm befinden und eine Unterteilung in Abschnitte die Benutzerfreundlichkeit verbessert.

Abschnitte Section innerhalb von Form

Section ist der grundlegende Baustein von Form, mit dem logisch zusammengehörige Elemente gruppiert werden können. Jede Section kann eine Überschrift, eine Fußzeile und beliebig viele Steuerelemente enthalten. Das System fügt automatisch Abstände zwischen den Abschnitten hinzu und umschließt jeden in einem visuellen Block mit abgerundeten Ecken.

Die Verwendung von Section ist entscheidend für die Lesbarkeit des Formulars: nach Bedeutung gruppierte Elemente sind für den Benutzer leichter zu verarbeiten. Beispielsweise können auf einem Profileinstellungsbildschirm «Persönliche Daten», «Benachrichtigungen» und «Sicherheit» in einzelne Abschnitte unterteilt werden. Jeder Abschnitt kann eine Fußzeile mit erklärendem Text enthalten, den das System in einer kleineren Schriftart unterhalb der Elementgruppe anzeigt.

Form {
    Section(header: Text("Profil")) {
        TextField("Name", text: $name)
        TextField("Email", text: $email)
    }

    Section(header: Text("Benachrichtigungen"),
            footer: Text("Während Besprechungen deaktivieren")) {
        Toggle("Push notifications", isOn: $pushEnabled)
        Toggle("Email notifications", isOn: $emailEnabled)
    }
}

Im Beispiel enthält der erste Abschnitt «Profile» zwei Textfelder ohne Fußzeile, der zweite Abschnitt «Notifications» zwei Schalter mit einer Erklärung unterhalb der Gruppe. Die Fußzeile fügt automatisch Abstand hinzu und verwendet den Schriftstil caption. Ein Section kann eine Fußzeile ohne Überschrift oder eine Überschrift ohne Fußzeile haben.

Steuerelemente in Form

Form unterstützt alle standardmäßigen SwiftUI-Eingabeelemente. Picker wird in Form automatisch als Navigationszeile mit Übergang zu einem separaten Auswahlbildschirm unter iOS angezeigt. Toggle erscheint als Zeile mit einem rechtsbündigen Schalter. TextField erhält den Systemeingabestil mit einem Platzhalter.

Für numerische Werte werden Stepper (schrittweise Änderung) und Slider (stufenlose Änderung in einem Bereich) verwendet. DatePicker unterstützt mehrere Modi: date, time, dateAndTime. ColorPicker ist für die Farbauswahl verfügbar. Jedes Element passt sich ohne zusätzlichen Code an die Plattform an — unter iOS verwenden die Steuerelemente native UIKit-Stile, unter macOS AppKit.

Für benutzerdefinierte Steuerelemente innerhalb von Form kann jede SwiftUI View verwendet werden — sie erben das Standardverhalten des Abschnitts. Es wird jedoch empfohlen, bei Systemelementen zu bleiben, da sie HIG-Konformität garantieren und Barrierefreiheit (VoiceOver, Dynamic Type) ohne zusätzliche Konfiguration unterstützen.

Form-Codebeispiele

Erstellen wir einen Registrierungsbildschirm mit Form. Das Formular enthält vier Abschnitte: persönliche Daten, Rollenauswahl, Abonnement-Einstellungen und einen Senden-Button. Zur Gruppierung werden Section und standardmäßige SwiftUI-Steuerelemente verwendet.

struct RegistrationForm: View {
    @State private var name = ""
    @State private var email = ""
    @State private var role = "Developer"
    @State private var agreedToTerms = false

    let roles = ["Developer", "Designer", "Manager"]

    var body: some View {
        NavigationStack {
            Form {
                Section(header: Text("Persönliche Daten")) {
                    TextField("Name", text: $name)
                    TextField("Email", text: $email)
                        .keyboardType(.emailAddress)
                }

                Section(header: Text("Rolle")) {
                    Picker("Select role", selection: $role) {
                        ForEach(roles, id: \.self) { role in
                            Text(role).tag(role)
                        }
                    }
                }

                Section {
                    Toggle("Agree to terms", isOn: $agreedToTerms)
                }

                Section {
                    Button("Registrieren") {
                        submitForm()
                    }
                    .disabled(!agreedToTerms)
                }
            }
            .navigationTitle("Registration")
        }
    }

    private func submitForm() { }
}

Das Formular ist in vier Section unterteilt: persönliche Daten mit zwei Textfeldern, Rollenauswahl über Picker, Zustimmung zu den Bedingungen über Toggle und ein Registrierungs-Button. Der Button ist deaktiviert, bis der Benutzer den Bedingungen zustimmt — ein Beispiel für Validierung innerhalb von Form. NavigationStack fügt einen Titel hinzu und ermöglicht Picker, unter iOS einen separaten Auswahlbildschirm zu öffnen.

Einstellungsformular mit Unterabschnitten

struct SettingsForm: View {
    @State private var volume: Double = 0.5
    @State private var isDarkMode = false
    @State private var reminderDate = Date()

    var body: some View {
        NavigationStack {
            Form {
                Section(header: Text("Erscheinungsbild")) {
                    Toggle("Dark mode", isOn: $isDarkMode)
                    Slider(value: $volume, in: 0...1) {
                        Text("Lautstärke")
                    }
                }

                Section(header: Text("Erinnerungen"),
                        footer: Text("Sie erhalten eine Benachrichtigung zur ausgewählten Zeit")) {
                    DatePicker("Remind at",
                        selection: $reminderDate,
                        displayedComponents: .hourAndMinute)
                }

                Section {
                    NavigationLink("Advanced Settings",
                        destination: AdvancedSettingsView())
                }
            }
            .navigationTitle("Settings")
        }
    }
}

Dieses Beispiel zeigt eine Kombination von Slider, DatePicker und NavigationLink innerhalb von Form. DatePicker verwendet den Modus hourAndMinute, um nur die Uhrzeit anzuzeigen. NavigationLink im letzten Abschnitt erstellt einen Übergang zu einem Bildschirm für erweiterte Einstellungen — ein häufiges Muster für Settings-ähnliche Oberflächen. Die Überschriften und Fußzeilen der Abschnitte machen das Formular selbsterklärend: Der Benutzer versteht sofort, zu welcher Gruppe jedes Steuerelement gehört.