Deklarativ denken

Willkommen in Stufe 2

In Stufe 1 hast du die Sprache Swift gelernt. Ab jetzt bekommt dein Code eine Oberfläche: Texte, Bilder, Buttons, Listen. Bevor wir aber Views bauen, müssen wir über eine Denkweise sprechen. Sie ist der wichtigste Unterschied zwischen SwiftUI und fast allem, was es vorher gab, und wer sie verinnerlicht hat, versteht SwiftUI doppelt so schnell.

Das Problem: Die Oberfläche aktuell halten

Stell dir eine einfache Wetter-App vor. Sie zeigt eine Temperatur. Ist es unter 0 Grad, soll der Text blau sein und daneben ein Schneeflocken-Symbol stehen. Darüber ist er orange, mit einer Sonne.

Jetzt ändert sich die Temperatur von 3 auf −2 Grad. Was muss passieren?

1. Der Text muss von „3 °C“ auf „−2 °C“ geändert werden.
2. Die Farbe muss von Orange auf Blau wechseln.
3. Das Symbol muss von der Sonne zur Schneeflocke wechseln.

Vergisst du einen dieser drei Schritte, zeigt die App Unsinn: „−2 °C“ in Orange mit einer Sonne. Und das ist nur eine Zahl. Echte Apps haben Hunderte solcher Abhängigkeiten.

Der imperative Weg: Befehle erteilen

Früher, und in vielen anderen Frameworks bis heute, hat man Oberflächen imperativ gebaut. Imperativ kommt vom lateinischen imperare, befehlen. Du sagst dem Computer Schritt für Schritt, was er tun soll:

// Pseudocode im imperativen Stil
func temperatureChanged(to newValue: Int) {
    label.text = "\(newValue) °C"

    if newValue < 0 {
        label.textColor = .blue
        icon.image = snowflake
    } else {
        label.textColor = .orange
        icon.image = sun
    }
}

Das funktioniert. Aber du bist dafür verantwortlich, bei jeder Änderung jede betroffene Stelle zu aktualisieren. Kommt ein neues Element dazu, etwa eine Warnung bei Glatteis, musst du daran denken, es überall mitzupflegen: beim Start, bei jeder Änderung, beim Zurücksetzen. Mit der Zeit wird das ein Netz aus Befehlen, in dem sich leicht Fehler verstecken.

Der deklarative Weg: Beschreiben, was sein soll

SwiftUI arbeitet deklarativ. Deklarieren heißt erklären, festlegen. Du sagst nicht, was der Computer tun soll, sondern beschreibst, wie das Ergebnis aussehen soll, abhängig von den Daten:

struct WeatherView: View {
    let temperature: Int

    var body: some View {
        HStack {
            Image(systemName: temperature < 0 ? "snowflake" : "sun.max.fill")
            Text("\(temperature) °C")
        }
        .foregroundStyle(temperature < 0 ? .blue : .orange)
        .font(.largeTitle)
    }
}

Lies den body laut: „Die View ist eine waagrechte Reihe aus einem Symbol und einem Text. Das Symbol ist eine Schneeflocke, wenn es unter null hat, sonst eine Sonne. Die Farbe ist Blau bei Frost, sonst Orange.“

Da steht kein einziger Befehl wie „ändere“ oder „setze“. Nur eine Beschreibung. Ändert sich temperature, ruft SwiftUI body einfach neu auf, bekommt eine neue Beschreibung und sorgt selbst dafür, dass der Bildschirm passt.

Die Formel, die alles erklärt

In Lektion 2.9 wirst du eine Formel sehen, die SwiftUI auf den Punkt bringt:

UI = f(Zustand)

Die Oberfläche ist eine Funktion der Daten. Wie eine mathematische Funktion: Gleiche Eingabe ergibt immer die gleiche Ausgabe. Bei temperature = −2 sieht die View immer gleich aus, egal ob die Temperatur vorher 3 oder 30 war.

Das hat enorme Vorteile:

• Keine vergessenen Updates. Es gibt nur eine Beschreibung, und sie gilt immer.
• Keine widersprüchlichen Zustände. „−2 °C in Orange“ kann gar nicht entstehen.
• Leicht zu lesen. Du siehst auf einen Blick, wie die Oberfläche in jeder Situation aussieht.
• Leicht zu testen. Für eine Vorschau übergibst du einfach bestimmte Daten und siehst das Ergebnis.

Was du schon kennst

Erinnerst du dich an Stufe 1? Dort hast du alle Bausteine gelernt, die diese Denkweise möglich machen:

Jetzt siehst du, warum wir so viel Zeit mit Swift verbracht haben.

Bedingungen in der Beschreibung

Weil body eine Beschreibung ist, kannst du darin ganz natürlich Bedingungen verwenden:

struct GreetingView: View {
    let name: String?

    var body: some View {
        VStack {
            if let name {
                Text("Hallo, \(name)!")
            } else {
                Text("Hallo, Gast!")
                Text("Bitte melde dich an.")
                    .foregroundStyle(.secondary)
            }
        }
    }
}

Das liest sich wie: „Gibt es einen Namen, zeig eine persönliche Begrüßung. Sonst zeig eine allgemeine Begrüßung und einen Hinweis.“ Optional Binding aus Lektion 1.9 funktioniert hier genauso.

Wer macht was?

Am Anfang hilft es, die Aufgaben klar zu trennen:

Du konzentrierst dich auf das Was, SwiftUI kümmert sich um das Wie.

Ein Gedankenexperiment

Bevor du weiterliest, versuch einmal Folgendes: Nimm eine App, die du oft benutzt, etwa die Wetter-App oder die Nachrichten-App, und beschreib einen Bildschirm in Worten, so wie wir es oben getan haben:

• „Ganz oben steht der Ortsname, darunter groß die Temperatur …“
• „Gibt es eine Unwetterwarnung, steht darunter ein roter Kasten …“
• „Dann folgt eine Liste mit den nächsten Tagen, pro Tag eine Zeile mit …“

Merkst du, dass du automatisch deklarativ beschreibst? Genau so denken Menschen über Oberflächen. SwiftUI lässt dich deinen Code genauso schreiben.

Typische Denkfehler

„Ich muss die View ändern“

Anfänger suchen oft nach einem Befehl wie text.setColor(.red). So etwas gibt es in SwiftUI nicht. Du änderst nie die View, du änderst die Daten, und die Beschreibung reagiert darauf.

„Ich speichere mir die View in einer Variable und passe sie später an“

let label = Text("Hallo")
label.foregroundStyle(.red)   // ändert label nicht!

Ein Modifier verändert die View nicht. Er erzeugt eine neue Beschreibung (Lektion 2.4). Deshalb schreibt man Modifier direkt in die Beschreibung, in einer Kette.

„body wird nur einmal aufgerufen“

Falsch. body kann jederzeit und beliebig oft neu aufgerufen werden. Rechne nie damit, dass Code in body nur einmal läuft.

FAQ

Übungen

wenn Akku sich ändert:
    setze Text auf "\(akku) %"
    wenn akku < 20: setze Farbe rot, zeige Warnsymbol
    sonst: setze Farbe grün, verstecke Warnsymbol

HStack {
    Text("\(battery) %")
    if battery < 20 {
        Image(systemName: "exclamationmark.triangle.fill")
    }
}
.foregroundStyle(battery < 20 ? .red : .green)

enum LoadingState {
    case loading
    case failure(message: String)
    case loaded(items: [String])
}

Zusammenfassung

• Imperativ heißt: Schritt für Schritt befehlen, was sich ändern soll.
• Deklarativ heißt: beschreiben, wie es abhängig von den Daten aussehen soll.
• SwiftUI ist deklarativ: UI = f(Zustand).
• Du änderst nie die View, sondern die Daten. SwiftUI ruft body neu auf und aktualisiert den Bildschirm.
• In body stehen nur Beschreibungen, keine Aktionen.
• Bedingungen wie if, if let und der ternäre Operator machen Beschreibungen flexibel.

Spickzettel

struct MyView: View {
    let value: Int                    // Daten

    var body: some View {             // Beschreibung
        Text("\(value)")
            .foregroundStyle(value < 0 ? .blue : .orange)
        if value > 100 {
            Text("Sehr hoch!")
        }
    }
}