@Binding: Zustand teilen

Das Problem: Zustand in der falschen View

Aus Lektion 2.9 kennst du @State. Jetzt willst du eine Einstellungsseite bauen, mit einem eigenen, wiederverwendbaren Schalter. Naheliegend wäre:

struct SettingsView: View {
    @State private var notificationsOn = false

    var body: some View {
        VStack {
            FancySwitch()
            Text(notificationsOn ? "Benachrichtigungen an" : "Benachrichtigungen aus")
        }
    }
}

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

    var body: some View {
        Button(isOn ? "AN" : "AUS") {
            isOn.toggle()
        }
        .font(.headline)
        .padding()
        .background(isOn ? .green : .gray)
        .foregroundStyle(.white)
        .clipShape(.capsule)
    }
}

Tippst du auf den Schalter, wechselt er zwischen AN und AUS. Aber der Text darunter bleibt bei „Benachrichtigungen aus“. Warum?

Es gibt zwei unabhängige Werte: notificationsOn in der SettingsView und isOn im FancySwitch. Der Schalter ändert nur seinen eigenen. Die beiden wissen nichts voneinander.

Was wir brauchen: Der Schalter soll keinen eigenen Wert haben, sondern den Wert seiner Eltern-View mitbenutzen, lesen und ändern dürfen.

Die Lösung: @Binding

struct FancySwitch: View {
    @Binding var isOn: Bool      // 👈 statt @State

    var body: some View {
        Button(isOn ? "AN" : "AUS") {
            isOn.toggle()
        }
        .font(.headline)
        .padding()
        .background(isOn ? .green : .gray)
        .foregroundStyle(.white)
        .clipShape(.capsule)
    }
}

Und in der Eltern-View übergibst du den Zustand mit $:

struct SettingsView: View {
    @State private var notificationsOn = false

    var body: some View {
        VStack(spacing: 20) {
            FancySwitch(isOn: $notificationsOn)   // 👈 mit $
            Text(notificationsOn ? "Benachrichtigungen an" : "Benachrichtigungen aus")
        }
    }
}

Jetzt ändert sich der Text mit dem Schalter.

Was @Binding bedeutet

Ein Binding ist eine Verbindung zu einem Wert, der woanders gespeichert ist. Es ist kein eigener Speicher, sondern eher eine Fernbedienung.

So spielen die Teile zusammen:

SettingsView
  @State notificationsOn  ◀── der eigentliche Wert, gehört SettingsView
        │
        │ $notificationsOn  (Verbindung übergeben)
        ▼
FancySwitch
  @Binding isOn           ◀── liest und schreibt notificationsOn

Drückt der Nutzer auf den Schalter:

1. isOn.toggle() im FancySwitch schreibt über die Verbindung in notificationsOn.
2. SwiftUI bemerkt die Änderung an notificationsOn.
3. SettingsView und FancySwitch werden neu berechnet.
4. Schalter und Text zeigen den neuen Zustand.

$ erklärt

In Lektion 2.9 hattest du $ schon als Vorgeschmack gesehen. Jetzt verstehst du es ganz:

Mit $ holst du aus einem @State die Verbindung heraus, die du dann weitergibst. Innerhalb der Kind-View verwendest du die Binding-Eigenschaft wieder ganz normal ohne $: isOn liest, isOn = true schreibt.

Und weil eine Binding-Eigenschaft selbst wieder eine Verbindung ist, kannst du sie mit $ weiterreichen, beliebig tief:

struct SettingsRow: View {
    @Binding var isOn: Bool

    var body: some View {
        HStack {
            Text("Benachrichtigungen")
            Spacer()
            FancySwitch(isOn: $isOn)   // Verbindung weiterreichen
        }
    }
}

Apples Views benutzen Bindings auch

Jetzt ergibt etwas Sinn, was du schon gesehen hast:

Toggle("WLAN", isOn: $wifiOn)
TextField("Name", text: $name)
Slider(value: $volume)

Toggle, TextField und Slider funktionieren genau wie dein FancySwitch: Sie besitzen keinen eigenen Wert, sondern bekommen eine Verbindung zu deinem Zustand. Wenn der Nutzer sie bedient, ändern sie deinen Wert. Deshalb steht dort immer ein $.

Die einzige Quelle der Wahrheit

Das Prinzip hinter @Binding hat einen Namen: Single Source of Truth, die einzige Quelle der Wahrheit. Jede Information wird an genau einer Stelle gespeichert. Alle anderen Stellen lesen von dort oder bekommen eine Verbindung dorthin.

Im kaputten Beispiel am Anfang gab es zwei Quellen, notificationsOn und isOn, und sie liefen auseinander. Mit @Binding gibt es nur noch eine.

Bindings in Previews

Eine View mit @Binding kann ihren Wert nicht selbst erzeugen. In der Preview brauchst du deshalb einen Wert, an den du sie binden kannst. Zwei Möglichkeiten:

Konstante Verbindung, wenn du nur das Aussehen prüfen willst:

#Preview("An") {
    FancySwitch(isOn: .constant(true))
}

.constant(true) ist ein Binding, das immer true liefert und Änderungen ignoriert. Tippen bewirkt dann nichts.

Echter Zustand, wenn du interagieren willst (Lektion 2.3):

#Preview("Interaktiv") {
    @Previewable @State var isOn = false
    FancySwitch(isOn: $isOn)
}

Typische Fehler

$ vergessen

FancySwitch(isOn: notificationsOn)

Die View will eine Verbindung, du gibst ihr nur den Wert. Schreib $notificationsOn.

$ vor einer normalen Eigenschaft

let title = "Hallo"
TextField("Titel", text: $title)

$ funktioniert nur bei @State, @Binding und anderen Property Wrappern, die eine Verbindung anbieten. Eine let-Konstante kann man nicht ändern, also gibt es auch keine Verbindung.

@Binding mit Startwert

@Binding var isOn = false

Ein Binding hat keinen eigenen Wert, also auch keinen Startwert. Der Wert kommt immer von außen. Lösch das = false.

@Binding als private

@Binding private var isOn: Bool

Dann kann die Eltern-View die Verbindung nicht übergeben, und der automatische Initializer verlangt sie trotzdem. Bindings sind nicht private. Im Gegensatz zu @State, das immer private sein sollte.

Zwei Quellen der Wahrheit

Kein Compiler-Fehler, aber ein Logikfehler: Eine Kind-View hat ein eigenes @State, obwohl die Eltern-View denselben Wert braucht. Die Anzeige läuft auseinander. Lösung: @State in der Eltern-View, @Binding im Kind.

FAQ

Übungen

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

    var body: some View {
        VStack(spacing: 20) {
            Text("\(count)")
                .font(.system(size: 64, weight: .bold))
            CounterButtons(count: $count)
        }
    }
}

struct CounterButtons: View {
    @Binding var count: Int

    var body: some View {
        HStack(spacing: 20) {
            Button("−") { count -= 1 }
            Button("+") { count += 1 }
        }
        .font(.largeTitle)
    }
}

#Preview {
    CounterView()
}

struct StarRating: View {
    @Binding var rating: Int

    var body: some View {
        HStack {
            ForEach(1...5, id: \.self) { number in
                Button {
                    rating = number
                } label: {
                    Image(systemName: number <= rating ? "star.fill" : "star")
                        .foregroundStyle(number <= rating ? .yellow : .gray)
                }
            }
        }
        .font(.title)
    }
}

struct ReviewView: View {
    @State private var rating = 3

    var body: some View {
        VStack(spacing: 12) {
            StarRating(rating: $rating)
            Text("\(rating) von 5 Sternen")
        }
    }
}

#Preview {
    ReviewView()
}

Zusammenfassung

• @Binding ist eine Verbindung zu einem Wert, der woanders gespeichert ist.
• Die Eltern-View besitzt den Wert mit @State und übergibt ihn mit $.
• Die Kind-View liest und schreibt ihn über @Binding var, ohne Startwert und nicht private.
• Toggle, TextField, Slider und viele andere Views arbeiten mit Bindings.
• Single Source of Truth: Jeder Wert hat genau eine Quelle.
• In Previews: .constant(...) oder @Previewable @State.

Spickzettel

// Eltern-View
@State private var isOn = false
ChildView(isOn: $isOn)

// Kind-View
struct ChildView: View {
    @Binding var isOn: Bool
    var body: some View {
        Button("Umschalten") { isOn.toggle() }
    }
}

#Preview { ChildView(isOn: .constant(true)) }