@Environment

Das Problem: Durchreichen durch viele Ebenen

Stell dir einen View-Baum vor:

AppRoot
 └─ MainView
     └─ HabitListView
         └─ HabitSection
             └─ HabitRow
                 └─ StreakBadge     ← braucht die Einstellungen

Ganz unten braucht StreakBadge die Benutzereinstellungen, etwa ob Streaks angezeigt werden sollen. Mit dem, was du bisher kennst, müsstest du das Einstellungsobjekt durch jede Ebene reichen: MainView(settings:), HabitListView(settings:), HabitSection(settings:) … Fünf Views bekommen einen Parameter, mit dem sie selbst nichts anfangen, nur um ihn weiterzugeben.

Das nennt man Prop Drilling (wörtlich: Eigenschaften durchbohren), und es macht Code zäh: Jede neue Zwischen-View muss den Parameter kennen, und jeder Umbau zieht Änderungen durch viele Dateien.

Die Lösung: die Umgebung (englisch environment).

Was ist die Umgebung?

Du kennst sie schon aus Lektion 2.2 und 2.19: @Environment(\.scenePhase) und @Environment(\.dismiss).

Die Umgebung ist eine Sammlung von Werten, die SwiftUI automatisch an alle Views darunter weitergibt. Jede View kann sich daraus nehmen, was sie braucht, ohne dass die Views dazwischen etwas davon wissen.

Systemwerte auslesen

SwiftUI legt viele nützliche Werte in die Umgebung:

struct InfoView: View {
    @Environment(\.colorScheme) private var colorScheme
    @Environment(\.dynamicTypeSize) private var typeSize
    @Environment(\.locale) private var locale
    @Environment(\.horizontalSizeClass) private var sizeClass

    var body: some View {
        List {
            LabeledContent("Farbschema", value: colorScheme == .dark ? "Dunkel" : "Hell")
            LabeledContent("Schriftgröße", value: "\(typeSize)")
            LabeledContent("Sprache", value: locale.identifier)
            LabeledContent("Breite", value: sizeClass == .compact ? "kompakt" : "normal")
        }
    }
}

Eine kleine Auswahl der wichtigsten Werte:

Die Schreibweise \.colorScheme ist ein Key Path (Lektion 2.16, 🟡-FAQ): ein Verweis auf eine Eigenschaft der Umgebung.

Umgebungswerte setzen

Viele dieser Werte kannst du für einen Teil des View-Baums auch überschreiben:

VStack {
    Text("Immer dunkel")
}
.environment(\.colorScheme, .dark)

Genau das hast du in Lektion 2.3 mit Previews gemacht: .preferredColorScheme(.dark) und .dynamicTypeSize(...) sind Kurzformen, die Umgebungswerte setzen.

Eigene Objekte in die Umgebung legen

Jetzt das eigentliche Ziel: Deinen eigenen @Observable-Store allen Views zugänglich machen.

Schritt 1: An einer hohen Stelle das Objekt erzeugen und mit .environment(...) in die Umgebung legen:

@main
struct HabitsApp: App {
    @State private var settings = AppSettings()

    var body: some Scene {
        WindowGroup {
            MainView()
                .environment(settings)
        }
    }
}

Schritt 2: In jeder beliebigen View darunter mit @Environment herausholen:

@Observable
class AppSettings {
    var showStreaks = true
    var accentColor = Color.blue
}

struct StreakBadge: View {
    @Environment(AppSettings.self) private var settings
    let streak: Int

    var body: some View {
        if settings.showStreaks && streak > 0 {
            Text("🔥 \(streak)")
                .font(.caption)
                .foregroundStyle(settings.accentColor)
        }
    }
}

Beachte die Schreibweise: Für eigene Objekte steht in @Environment(...) der Typ mit .self, kein Key Path. SwiftUI sucht in der Umgebung nach einem Objekt genau dieses Typs.

MainView, HabitListView und alle anderen Views dazwischen müssen von AppSettings nichts wissen. Kein Durchreichen mehr.

Ändern über die Umgebung

Methoden aufrufen und Eigenschaften setzen geht direkt:

Button("Streaks ausblenden") {
    settings.showStreaks = false
}

Brauchst du Bindings, etwa für einen Toggle, kombinierst du @Environment mit @Bindable lokal in body (Lektion 3.2):

struct SettingsView: View {
    @Environment(AppSettings.self) private var settings

    var body: some View {
        @Bindable var settings = settings
        Form {
            Toggle("Streaks anzeigen", isOn: $settings.showStreaks)
            ColorPicker("Akzentfarbe", selection: $settings.accentColor)
        }
    }
}

Eigene Umgebungswerte mit @Entry

Neben Objekten kannst du auch einfache Werte in die Umgebung legen, etwa einen Abstand, eine Farbe oder einen Modus. Dafür erweiterst du EnvironmentValues:

extension EnvironmentValues {
    @Entry var cardCornerRadius: CGFloat = 16
}

@Entry ist ein Makro, das einen neuen Umgebungswert mit Standardwert anlegt. Danach funktioniert er wie die eingebauten:

struct Card: View {
    @Environment(\.cardCornerRadius) private var radius

    var body: some View {
        RoundedRectangle(cornerRadius: radius)
            .fill(.blue.opacity(0.2))
            .frame(height: 100)
    }
}

// Überschreiben für einen Teilbaum:
VStack {
    Card()
    Card()
}
.environment(\.cardCornerRadius, 4)

Das ist ideal für Designvorgaben, die für ganze Bereiche gelten sollen. In Lektion 3.29 baust du damit ein kleines Designsystem.

Wann Umgebung, wann Parameter?

Die Umgebung ist bequem, aber kein Allheilmittel:

Typische Fehler

Objekt fehlt in der Umgebung

Eine View verlangt @Environment(AppSettings.self), aber weiter oben hat niemand .environment(settings) gesetzt. Besonders häufig in Previews und Sheets:

#Preview {
    StreakBadge(streak: 5)
        .environment(AppSettings())
}

Sheets erben die Umgebung der View, an der sie hängen. Liegt das Objekt dort vor, ist es auch im Sheet verfügbar.

Key Path statt Typ

@Environment(\.AppSettings) private var settings

Für eigene @Observable-Objekte heißt es @Environment(AppSettings.self). Key Paths gibt es nur für Werte in EnvironmentValues.

$ direkt auf @Environment

Toggle("Streaks", isOn: $settings.showStreaks)

@Environment liefert kein $. Verwende @Bindable var settings = settings in body.

FAQ

Übungen

struct GreetingView: View {
    @Environment(\.colorScheme) private var colorScheme

    var body: some View {
        Text(colorScheme == .dark ? "Gute Nacht 🌙" : "Guten Tag ☀️")
            .font(.largeTitle)
    }
}

#Preview("Hell") { GreetingView() }
#Preview("Dunkel") { GreetingView().preferredColorScheme(.dark) }

Zusammenfassung

• Die Umgebung gibt Werte automatisch an alle Views darunter weiter, ohne Durchreichen.
• @Environment(\.schlüssel) liest Systemwerte wie colorScheme, dynamicTypeSize, dismiss.
• .environment(objekt) legt ein @Observable-Objekt in die Umgebung, @Environment(Typ.self) holt es heraus.
• Für Bindings: @Bindable var x = x lokal in body.
• @Entry in extension EnvironmentValues legt eigene Umgebungswerte an.
• Umgebung für app-weite Dinge, Parameter für konkrete Daten. Fehlende Objekte führen zum Absturz.

Spickzettel

@Environment(\.colorScheme) private var colorScheme
@Environment(\.dismiss) private var dismiss

// bereitstellen
ContentView().environment(settings)

// verwenden
@Environment(AppSettings.self) private var settings
var body: some View {
    @Bindable var settings = settings
    Toggle("An", isOn: $settings.flag)
}

// eigener Wert
extension EnvironmentValues {
    @Entry var spacing: CGFloat = 16
}
.environment(\.spacing, 8)