Swift Academy · Lektion

View Models an Views binden

Verbinden Sie View Models mit SwiftUI und Combine.

View Models an Views binden ist eine kostenlose Swift Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Swift Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Swift Academy-Kurs umfasst insgesamt 4 Lektionen.

ViewModel mit View verbinden

Ein ViewModel ist erst dann nützlich, wenn die View auf seine Änderungen reagiert. In SwiftUI wird diese Reaktivität durch die auf Combine basierenden Property Wrapper @Published, @StateObject und @ObservedObject ermöglicht.

Zusammen bilden sie eine automatische Bindung: Wenn sich das ViewModel ändert, wird die View neu gerendert.

ObservableObject

Damit SwiftUI ein ViewModel beobachten kann, muss es dem Protokoll ObservableObject entsprechen. Dieses Protokoll stellt einen objectWillChange-Publisher bereit, der vor jeder Änderung ausgelöst wird.

final class CounterViewModel: ObservableObject {
    @Published var count: Int = 0

    func increment() {
        count += 1
    }
}

@Published-Eigenschaften

Wenn Sie eine Eigenschaft mit @Published kennzeichnen, wird automatisch jedes Mal eine Änderungsbenachrichtigung ausgelöst, sobald ihr Wert gesetzt wird.

Jede @Published-Eigenschaft fließt in den objectWillChange-Publisher des Objekts ein, sodass die View genau weiß, wann sie aktualisiert werden muss.

final class SearchViewModel: ObservableObject {
    @Published var query: String = ""
    @Published var results: [String] = []
}

@StateObject

@StateObject weist eine View an, ein ViewModel zu erstellen und zu besitzen. SwiftUI erstellt es einmal und hält es über erneute Darstellungen dieser View hinweg am Leben.

Verwenden Sie @StateObject an der Stelle, an der das ViewModel zum ersten Mal erstellt wird.

struct CounterView: View {
    @StateObject private var viewModel = CounterViewModel()

    var body: some View {
        Button("Count: \(viewModel.count)") {
            viewModel.increment()
        }
    }
}

@ObservedObject

@ObservedObject ist für ein ViewModel vorgesehen, das an anderer Stelle erstellt und übergeben wurde. Die View beobachtet es, besitzt aber nicht dessen Lebenszyklus.

Verwenden Sie es für untergeordnete Views, die ein ViewModel von einer übergeordneten View erhalten.

struct BadgeView: View {
    @ObservedObject var viewModel: CounterViewModel

    var body: some View {
        Text("Total: \(viewModel.count)")
    }
}

@StateObject vs. @ObservedObject

Der entscheidende Unterschied ist der Besitz:

@StateObject — die View besitzt es; es bleibt bei erneuten Darstellungen erhalten
@ObservedObject — es wird übergeben; die View besitzt es nicht

Wenn Sie @ObservedObject verwenden, obwohl @StateObject erforderlich wäre, kann das Objekt bei jeder Aktualisierung des übergeordneten Features neu erstellt werden und seinen Zustand verlieren.

Ein ViewModel weiterreichen

Erstellen Sie das ViewModel einmal mit @StateObject in der übergeordneten View und übergeben Sie es anschließend an untergeordnete Views, die es mit @ObservedObject kennzeichnen.

struct ParentView: View {
    @StateObject private var viewModel = CounterViewModel()

    var body: some View {
        VStack {
            BadgeView(viewModel: viewModel)
            Button("Add") { viewModel.increment() }
        }
    }
}

Bidirektionale Bindings

Für Eingaben wie Textfelder benötigen Sie ein bidirektionales Binding. SwiftUI erzeugt es aus einer @Published-Eigenschaft, indem Sie das Präfix $ am Wrapper verwenden.

struct SearchView: View {
    @StateObject private var viewModel = SearchViewModel()

    var body: some View {
        TextField("Search", text: $viewModel.query)
    }
}

UI-Zustand steuern

Die View sollte alles, was sie anzeigt, aus veröffentlichten Eigenschaften ableiten. Ladeanzeigen, Fehlerbanner und Inhalte ergeben sich vollständig aus dem Zustand des ViewModels.

final class FeedViewModel: ObservableObject {
    enum State { case loading, loaded([String]), error(String) }
    @Published var state: State = .loading
}

Auf Zustand reagieren

Die View wählt abhängig vom Zustand des ViewModels die passende UI zur Darstellung aus. Es gibt keinen imperativen Code zum Ein- oder Ausblenden, sondern nur eine deklarative Zuordnung.

struct FeedView: View {
    @StateObject var viewModel = FeedViewModel()
    var body: some View {
        switch viewModel.state {
        case .loading: ProgressView()
        case .loaded(let items): List(items, id: \.self) { Text($0) }
        case .error(let message): Text(message)
        }
    }
}

Updates auf dem Main-Thread halten

SwiftUI verlangt, dass veröffentlichte Änderungen im Main-Thread erfolgen. Wenn ein ViewModel seinen Zustand nach asynchroner Arbeit aktualisiert, versehen Sie es mit @MainActor, um dies zu garantieren.

@MainActor
final class ProfileViewModel: ObservableObject {
    @Published var name: String = ""

    func load() async {
        name = await fetchName()
    }
}

Kurztest

Testen Sie Ihr Wissen über Bindings.

Zusammenfassung

Sie haben ViewModels mithilfe von SwiftUI-Bindings mit Views verbunden:

ObservableObject + @Published lösen Änderungsbenachrichtigungen aus
@StateObject erstellt und besitzt ein ViewModel
@ObservedObject beobachtet ein übergebenes ViewModel
@MainActor hält asynchrone Aktualisierungen im Main-Thread

Mit den reaktiven Bindings spiegelt die View automatisch immer den neuesten Zustand des ViewModels wider.

Häufig gestellte Fragen

Ist die Lektion „View Models an Views binden“ kostenlos?

Ja — der vollständige Text von „View Models an Views binden“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Swift Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Swift Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „View Models an Views binden“?

Verbinden Sie View Models mit SwiftUI und Combine. Du übst Swift Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Swift Academy zu starten?

Keine Vorkenntnisse erforderlich. Swift Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „View Models an Views binden“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Swift Academy-Lektion Code schreiben und ausführen?

Ja. Jede Swift Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Swift Academy