Formulare

Das Problem: Viele Eingaben, wenig Ordnung

In den letzten Lektionen hast du Textfelder, Schalter, Picker und Stepper kennengelernt. Packst du zehn davon in einen VStack, entsteht ein unübersichtlicher Haufen: Abstände passen nicht, Beschriftungen stehen mal links, mal oben, und nichts sieht aus wie die Einstellungen-App des iPhones.

Genau dafür gibt es Form: einen Container, der Eingabeelemente automatisch im typischen iOS-Stil anordnet. Gruppiert, sauber ausgerichtet, scrollbar und vertraut.

Das erste Formular

struct ProfileForm: View {
    @State private var name = ""
    @State private var notificationsOn = true
    @State private var theme = "System"

    var body: some View {
        Form {
            TextField("Name", text: $name)
            Toggle("Benachrichtigungen", isOn: $notificationsOn)
            Picker("Design", selection: $theme) {
                Text("System").tag("System")
                Text("Hell").tag("Hell")
                Text("Dunkel").tag("Dunkel")
            }
        }
    }
}

Ohne einen einzigen Layout-Modifier sieht das schon aus wie eine echte iOS-App. Das Formular kümmert sich um:

• den gruppierten Stil mit Hintergrund und Trennlinien,
• die Ausrichtung: Beschriftung links, Wert rechts,
• das Scrollen, wenn der Inhalt länger wird als der Bildschirm,
• den passenden Stil für jedes Element: Textfelder ohne Rahmen, Picker als Menü.

Abschnitte mit Section

Ein Formular wird übersichtlich, wenn zusammengehörige Einträge gruppiert sind:

Form {
    Section("Profil") {
        TextField("Vorname", text: $firstName)
        TextField("Nachname", text: $lastName)
    }

    Section("Benachrichtigungen") {
        Toggle("Push-Nachrichten", isOn: $pushOn)
        Toggle("E-Mails", isOn: $mailOn)
    }

    Section {
        Button("Abmelden", role: .destructive) {
            // abmelden
        }
    }
}

Jede Section ist eine eigene Gruppe mit Abstand zur nächsten. Der Text in den Klammern wird als Überschrift darüber angezeigt. Eine Section ohne Überschrift ist auch möglich, wie hier beim Abmelden-Button.

Fußnoten

Manchmal braucht ein Abschnitt eine Erklärung. Dafür gibt es eine Fußnote:

Section {
    Toggle("Standort teilen", isOn: $shareLocation)
} header: {
    Text("Datenschutz")
} footer: {
    Text("Dein Standort wird nur verwendet, um Cafés in deiner Nähe zu finden.")
}

Hier hat Section drei Closures: den Inhalt, header: und footer:. Die Fußnote erscheint klein und grau unter der Gruppe, genau wie in den iPhone-Einstellungen.

Werte anzeigen mit LabeledContent

Nicht jede Zeile ist eine Eingabe. Oft willst du einfach einen Wert anzeigen:

Section("Über die App") {
    LabeledContent("Version", value: "1.2.0")
    LabeledContent("Entwickler", value: "Anna Berger")
    LabeledContent("Gespeicherte Einträge") {
        Text(42, format: .number)
    }
}

LabeledContent zeigt eine Beschriftung links und den Wert rechts, gedämpft, wie in den Systemeinstellungen. Die zweite Form mit Closure erlaubt beliebige Views als Wert.

Elemente in Formularen

Viele Elemente passen sich in einem Form automatisch an. Ein paar Besonderheiten:

LabeledContent("Name") {
    TextField("Pflichtfeld", text: $name)
        .multilineTextAlignment(.trailing)
}

Zustandsabhängige Formulare

Weil Form ein ganz normaler Teil der Beschreibung ist (Lektion 2.1), kannst du Abschnitte und Zeilen mit if ein- und ausblenden:

struct DeliveryForm: View {
    @State private var wantsDelivery = false
    @State private var street = ""
    @State private var city = ""

    var body: some View {
        Form {
            Section {
                Toggle("Lieferung", isOn: $wantsDelivery)
            }

            if wantsDelivery {
                Section("Lieferadresse") {
                    TextField("Straße", text: $street)
                    TextField("Ort", text: $city)
                }
            }
        }
        .animation(.default, value: wantsDelivery)
    }
}

Schaltet der Nutzer „Lieferung“ ein, erscheint der Adressabschnitt. Mit .animation(.default, value: wantsDelivery) gleitet er sanft ein, statt plötzlich aufzutauchen. Animationen lernst du ausführlich in Lektion 3.23.

Formulare mit Struct-Daten

Bei vielen Feldern werden die vielen @State-Variablen unübersichtlich. Besser: eine Struct (Lektion 1.12) und ein @State. Mit $profile.name bekommst du ein Binding direkt auf eine Eigenschaft (Lektion 2.10, 🟡-FAQ):

struct Profile {
    var name = ""
    var email = ""
    var newsletter = false
    var birthday = Date.now
}

struct ProfileEditor: View {
    @State private var profile = Profile()

    var body: some View {
        Form {
            Section("Person") {
                TextField("Name", text: $profile.name)
                DatePicker("Geburtstag", selection: $profile.birthday, in: ...Date.now, displayedComponents: .date)
            }
            Section("Kontakt") {
                TextField("E-Mail", text: $profile.email)
                    .keyboardType(.emailAddress)
                    .textInputAutocapitalization(.never)
                Toggle("Newsletter", isOn: $profile.newsletter)
            }
        }
    }
}

Alle Daten des Formulars stecken jetzt in einem Wert. Den kannst du später mit einem Klick speichern oder an eine andere View übergeben. Genau so arbeiten wir in Projekt C.

Validierung

Ein Formular sollte erst abgeschickt werden können, wenn alles stimmt:

struct SignUpForm: View {
    @State private var name = ""
    @State private var email = ""
    @State private var acceptsTerms = false

    var isValid: Bool {
        !name.trimmingCharacters(in: .whitespaces).isEmpty
            && email.contains("@")
            && acceptsTerms
    }

    var body: some View {
        Form {
            Section {
                TextField("Name", text: $name)
                TextField("E-Mail", text: $email)
            } footer: {
                if !email.isEmpty && !email.contains("@") {
                    Text("Bitte gib eine gültige E-Mail-Adresse ein.")
                        .foregroundStyle(.red)
                }
            }

            Section {
                Toggle("Ich akzeptiere die AGB", isOn: $acceptsTerms)
            }

            Section {
                Button("Registrieren") {
                    // registrieren
                }
                .disabled(!isValid)
            }
        }
    }
}

isValid ist eine berechnete Eigenschaft: Sie fasst alle Bedingungen an einer Stelle zusammen. Der Button ist nur aktiv, wenn alles passt, und die Fußnote zeigt einen Hinweis, sobald die Eingabe erkennbar falsch ist.

Typische Fehler

Formular sieht leer aus

Ein TextField in einem Form hat keinen Rahmen. Ohne Platzhalter ist die Zeile leer. Gib jedem Textfeld einen aussagekräftigen Platzhalter oder ein LabeledContent.

Picker mit .navigationLink reagiert nicht

Dieser Stil braucht einen NavigationStack um das Formular, sonst ist der Picker ausgegraut. Navigation kommt in Lektion 2.17.

Ganze Zeile reagiert auf einen Button

Stehen in einer Zeile zwei Buttons, etwa in einem HStack, löst ein Tipp oft beide aus, weil die ganze Zeile antippbar ist. Gib beiden Buttons .buttonStyle(.borderless). Dann reagiert jeder nur auf seinen eigenen Bereich.

Formular in einer ScrollView

Ein Form scrollt selbst. In eine ScrollView gepackt, kann es auf null Höhe zusammenschrumpfen und unsichtbar werden. Lass die ScrollView weg.

FAQ

Übungen

struct AlarmForm: View {
    @State private var time = Date.now
    @State private var label = "Wecker"
    @State private var snooze = true

    var body: some View {
        Form {
            Section("Zeit") {
                DatePicker("Uhrzeit", selection: $time, displayedComponents: .hourAndMinute)
            }
            Section("Optionen") {
                TextField("Bezeichnung", text: $label)
                Toggle("Schlummern", isOn: $snooze)
            }
            Section {
                Button("Wecker löschen", role: .destructive) { }
            }
        }
    }
}

Zusammenfassung

• Form ordnet Eingabeelemente automatisch im iOS-Stil an und scrollt selbst.
• Section gruppiert Zeilen, mit optionalem header: und footer:.
• LabeledContent zeigt Beschriftung und Wert nebeneinander.
• Mit if blendest du Abschnitte abhängig vom Zustand ein, .animation macht es sanft.
• Eine Struct mit einem @State hält alle Formulardaten zusammen. $profile.name bindet einzelne Felder.
• Eine berechnete Eigenschaft isValid steuert, ob abgeschickt werden darf.

Spickzettel

Form {
    Section("Profil") {
        TextField("Name", text: $profile.name)
        Toggle("Newsletter", isOn: $profile.newsletter)
    }
    Section {
        Picker("Design", selection: $theme) { ... }
    } footer: {
        Text("Erklärung")
    }
    Section {
        LabeledContent("Version", value: "1.0")
        Button("Speichern") { save() }.disabled(!isValid)
    }
}
.animation(.default, value: someToggle)