@State: Die UI folgt dem Zustand

Das Problem: Eine View, die sich nicht ändern will

Bisher waren alle unsere Views statisch. Die Visitenkarte aus Projekt B sieht immer gleich aus, egal wie oft du darauf tippst. Echte Apps reagieren aber: Ein Like-Button wird rot, ein Zähler zählt hoch, ein Menü klappt auf.

Bauen wir also einen einfachen Zähler. Mit dem, was du aus Stufe 1 weißt, würdest du es wahrscheinlich so versuchen:

struct CounterView: View {
    var count = 0

    var body: some View {
        VStack(spacing: 20) {
            Text("\(count)")
                .font(.largeTitle)

            Button("Plus eins") {
                count += 1
            }
        }
    }
}

Das sieht vernünftig aus. Xcode ist aber anderer Meinung:

Übersetzt: „Du willst etwas verändern, das nicht verändert werden darf.“

Warum? Erinnere dich an Lektion 1.12: Views sind Structs. Innerhalb einer Struct darf eine normale Funktion oder Closure die eigenen Eigenschaften nicht verändern. Und selbst wenn das ginge, gäbe es ein zweites, größeres Problem. Dazu gleich mehr.

Die Lösung: @State

Ändere eine einzige Zeile:

struct CounterView: View {
    @State private var count = 0     // 👈 das ist neu

    var body: some View {
        VStack(spacing: 20) {
            Text("\(count)")
                .font(.largeTitle)

            Button("Plus eins") {
                count += 1
            }
        }
    }
}

#Preview {
    CounterView()
}

Der Fehler ist weg. Tippst du in der Preview auf den Button, zählt die Zahl hoch.

Damit kennst du @State. Jetzt schauen wir uns an, was dahinter steckt, denn hier liegt der Schlüssel zum ganzen SwiftUI-Denken.

Was @State wirklich macht

Views sind Baupläne, keine Objekte

In SwiftUI ist eine View kein dauerhaftes Ding auf dem Bildschirm. Sie ist eher ein Bauplan: „So soll es aussehen.“ SwiftUI liest diesen Bauplan, zeichnet den Bildschirm danach und wirft den Bauplan wieder weg.

Ändert sich etwas, ruft SwiftUI body erneut auf, bekommt einen neuen Bauplan und passt den Bildschirm an. Das passiert ständig und sehr schnell.

Genau das ist das zweite Problem von vorhin: Wäre count eine normale Eigenschaft, würde sie bei jedem neuen Bauplan wieder bei 0 beginnen. Die View hätte kein Gedächtnis.

@State ist das Gedächtnis

Mit @State sagst du zu SwiftUI:

„Bewahre diesen Wert für mich auf, außerhalb der View. Und wenn er sich ändert, zeichne die View neu.“

SwiftUI legt den Wert also in einem eigenen Speicher ab, der so lange lebt, wie die View auf dem Bildschirm ist. Deine View bekommt nur Zugriff darauf.

Der Ablauf beim Tippen auf den Button:

1. Du tippst auf „Plus eins“
2. count += 1               → der Wert im SwiftUI-Speicher wird 1
3. SwiftUI merkt: „count hat sich geändert!“
4. SwiftUI ruft body erneut auf
5. body liefert Text("1")    → der Bildschirm zeigt 1

Du sagst SwiftUI also nie: „Ändere den Text auf 1.“ Du änderst nur die Daten, und SwiftUI kümmert sich um den Rest.

Die wichtigste Formel in SwiftUI

UI = f(State)
Die Oberfläche ist eine Funktion des Zustands.

Bei gleichem Zustand sieht die Oberfläche immer gleich aus. Willst du, dass sich etwas auf dem Bildschirm ändert, änderst du den Zustand. Diesen Gedanken wirst du ab jetzt in jeder Lektion wiedersehen.

Zweites Beispiel: Etwas ein- und ausblenden

@State funktioniert mit jedem Typ, nicht nur mit Zahlen. Ein Bool eignet sich perfekt zum Ein- und Ausklappen:

struct RecipeCard: View {
    @State private var showsDetails = false

    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text("Spaghetti Carbonara")
                .font(.title2.bold())

            if showsDetails {
                Text("Zutaten: Spaghetti, Eier, Pecorino, Guanciale, Pfeffer.")
                    .foregroundStyle(.secondary)
            }

            Button(showsDetails ? "Weniger anzeigen" : "Mehr anzeigen") {
                showsDetails.toggle()
            }
        }
        .padding()
    }
}

#Preview {
    RecipeCard()
}

Hier sind zwei Dinge neu:

• if direkt in body: Du beschreibst einfach, wann der Text da sein soll. Ist showsDetails true, gehört der Text zum Bauplan, sonst nicht.
• .toggle(): kehrt einen Bool um. Aus true wird false und umgekehrt.

Auch der Button-Titel hängt vom Zustand ab. Eine einzige Variable steuert also zwei Stellen der Oberfläche, und beide passen immer zusammen. In der imperativen Programmierung müsstest du beide Stellen getrennt aktualisieren und könntest eine davon vergessen.

Drittes Beispiel: Ein kleiner Vorgeschmack auf $

Manche Bedienelemente wollen den Zustand nicht nur lesen, sondern selbst verändern, zum Beispiel ein Textfeld, in das jemand tippt:

struct GreetingView: View {
    @State private var name = ""

    var body: some View {
        VStack(spacing: 16) {
            TextField("Dein Name", text: $name)
                .textFieldStyle(.roundedBorder)

            Text(name.isEmpty ? "Hallo!" : "Hallo, \(name)!")
                .font(.title)
        }
        .padding()
    }
}

Beachte das $ vor name. Es bedeutet: „Ich gebe dir nicht den Wert, sondern eine Verbindung zum Wert. Du darfst ihn ändern.“ Diese Verbindung heißt Binding, und ihr gehört die ganze nächste Lektion.

Für jetzt reicht die Faustregel:

Die vier Regeln für @State

1. Immer private
@State gehört der View, in der es steht. Keine andere View soll es von außen setzen. Mit private macht Xcode das sogar für dich sichtbar.

2. Immer mit Startwert
@State private var count = 0. SwiftUI braucht einen Wert, mit dem es beginnen kann.

3. Für einfache, lokale Daten
Zahlen, Texte, Bools, kleine Structs, Arrays: alles, was nur diese View (und ihre Kinder) betrifft. Ob ein Menü offen ist, was gerade im Suchfeld steht, welcher Tab ausgewählt ist.

4. Nur in Views verwenden
@State funktioniert ausschließlich innerhalb von SwiftUI-Views. In einer normalen Struct oder Klasse hat es keine Wirkung.

Typische Fehler

Fehler 1: @State vergessen

Du versuchst, eine normale Eigenschaft zu verändern. Lösung: @State davorschreiben.

Fehler 2: Zustand in body ändern

var body: some View {
    count += 1          // ❌ Niemals!
    return Text("\(count)")
}

body soll nur beschreiben, nicht verändern. Eine Änderung in body löst ein neues body aus, das wieder ändert, und so weiter. Ändere den Zustand nur als Reaktion auf etwas: in einem Button, einer Geste oder in .onAppear.

Fehler 3: @State von außen befüllen wollen

struct ScoreView: View {
    @State var score: Int   // ❌ nicht private, kein Startwert
    ...
}

ScoreView(score: 10)

Das kompiliert sogar, führt aber zu einem verwirrenden Verhalten: SwiftUI übernimmt den Wert nur beim allerersten Mal. Ändert sich der Wert von außen später, merkt die View davon nichts. Kommen die Daten von außen, ist das ein Fall für @Binding (nächste Lektion) oder eine ganz normale let-Eigenschaft.

Fehler 4: $ vergessen

Das Textfeld will eine Verbindung, du gibst ihm aber nur den Wert. Lösung: text: $name statt text: name.

FAQ

struct Settings {
    var volume = 0.5
    var isMuted = false
}

@State private var settings = Settings()
// settings.isMuted = true  → View wird aktualisiert

#Preview {
    @Previewable @State var name = "Anna"
    TextField("Name", text: $name)
}

Übungen

struct CounterView: View {
    @State private var count = 0

    var body: some View {
        VStack(spacing: 20) {
            Text("\(count)")
                .font(.largeTitle)

            HStack(spacing: 20) {
                Button("Minus eins") {
                    if count > 0 {
                        count -= 1
                    }
                }
                Button("Plus eins") {
                    count += 1
                }
            }
        }
    }
}

struct LightSwitchView: View {
    @State private var isOn = false

    var body: some View {
        VStack(spacing: 40) {
            Image(systemName: isOn ? "lightbulb.fill" : "lightbulb")
                .font(.system(size: 120))
                .foregroundStyle(isOn ? .yellow : .gray)

            Button(isOn ? "Ausschalten" : "Einschalten") {
                isOn.toggle()
            }
            .buttonStyle(.borderedProminent)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(isOn ? Color.white : Color.black)
    }
}

struct DiceView: View {
    @State private var value = 1
    @State private var rolls = 0
    @State private var sixes = 0

    var body: some View {
        VStack(spacing: 30) {
            Image(systemName: "die.face.\(value)")
                .font(.system(size: 120))

            Button("Würfeln") {
                value = Int.random(in: 1...6)
                rolls += 1
                if value == 6 {
                    sixes += 1
                }
            }
            .buttonStyle(.borderedProminent)

            Text("Würfe: \(rolls) · Sechser: \(sixes)")
                .foregroundStyle(.secondary)
        }
    }
}

Zusammenfassung

• Views sind Baupläne. SwiftUI erzeugt sie ständig neu.
• Normale Eigenschaften haben deshalb kein Gedächtnis.
• @State speichert einen Wert außerhalb der View und zeichnet die View neu, wenn er sich ändert.
• UI = f(State): Du änderst Daten, nicht die Oberfläche.
• $name gibt eine Verbindung (Binding) weiter, mit der andere den Wert ändern dürfen.
• @State ist immer private, hat einen Startwert und ist für lokale Daten gedacht.

Spickzettel

@State private var count = 0            // Zustand anlegen
Text("\(count)")                         // lesen
Button("+") { count += 1 }               // ändern (nur in Reaktionen!)
Toggle("An", isOn: $isOn)                // Binding weitergeben
showsDetails.toggle()                    // Bool umkehren