Swift Academy · Leçon

Lier les modèles de vue aux vues

Reliez les modèles de vue à SwiftUI et Combine.

Lier les modèles de vue aux vues est une leçon Swift Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Swift Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Swift Academy comprend 4 leçons au total.

Connecter le ViewModel à la Vue

Un ViewModel n’est utile que lorsque la Vue réagit à ses changements. Dans SwiftUI, cette réactivité repose sur les enveloppes de propriétés fondées sur Combine : @Published, @StateObject et @ObservedObject.

Ensemble, elles forment une liaison automatique : lorsque le ViewModel change, la Vue est de nouveau affichée.

ObservableObject

Pour être observé par SwiftUI, un ViewModel doit respecter le protocole ObservableObject. Ce protocole lui fournit un éditeur objectWillChange qui se déclenche avant toute modification.

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

    func increment() {
        count += 1
    }
}

Propriétés @Published

Marquer une propriété avec @Published émet automatiquement une notification de changement chaque fois que sa valeur est définie.

Chaque propriété @Published alimente l’éditeur objectWillChange de l’objet, afin que la Vue sache exactement quand s’actualiser.

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

@StateObject

@StateObject indique à une Vue de créer et de posséder un ViewModel. SwiftUI l’instancie une seule fois et le conserve entre les réaffichages de cette Vue.

Utilisez @StateObject à l’endroit où le ViewModel est créé pour la première fois.

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

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

@ObservedObject

@ObservedObject sert pour un ViewModel qui a été créé ailleurs et transmis à la Vue. La Vue l’observe, mais ne gère pas son cycle de vie.

Utilisez-le pour les vues enfants qui reçoivent un ViewModel d’un parent.

struct BadgeView: View {
    @ObservedObject var viewModel: CounterViewModel

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

StateObject et ObservedObject

La différence essentielle concerne la possession :

@StateObject — la Vue le possède ; il survit aux réaffichages
@ObservedObject — il est transmis à la Vue, qui ne le possède pas

Utiliser @ObservedObject à la place de @StateObject peut entraîner la recréation de l’objet et la perte de son état à chaque mise à jour du parent.

Transmettre un ViewModel

Créez le ViewModel une seule fois avec @StateObject dans le parent, puis transmettez-le aux enfants qui le déclarent avec @ObservedObject.

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

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

Liaisons bidirectionnelles

Pour les entrées comme les champs de texte, vous avez besoin d’une liaison bidirectionnelle. SwiftUI en génère une à partir d’une propriété @Published en utilisant le préfixe $ de l’enveloppe.

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

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

Piloter l’état de l’interface

La Vue doit déduire tout ce qu’elle affiche à partir des propriétés publiées. Les indicateurs de chargement, les bannières d’erreur et le contenu proviennent tous de l’état du ViewModel.

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

Réagir à l’état

La Vue examine l’état du ViewModel pour afficher l’interface appropriée. Il n’y a aucun code impératif pour afficher ou masquer des éléments, seulement une correspondance déclarative.

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)
        }
    }
}

Maintenir les mises à jour sur le thread principal

SwiftUI exige que les changements publiés soient effectués sur le thread principal. Lorsqu’un ViewModel met à jour l’état après un travail asynchrone, annotez-le avec @MainActor pour garantir ce comportement.

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

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

Vérification rapide

Vérifiez vos connaissances sur les liaisons.

Récapitulatif

Vous avez connecté des ViewModels à des Vues avec les liaisons SwiftUI :

ObservableObject et @Published émettent des notifications de changement
@StateObject crée et possède un ViewModel
@ObservedObject observe un ViewModel transmis à la Vue
@MainActor maintient les mises à jour asynchrones sur le thread principal

Grâce aux liaisons réactives, la Vue reflète toujours automatiquement l’état le plus récent du ViewModel.

Questions Fréquemment Posées

La leçon « Lier les modèles de vue aux vues » est-elle gratuite ?

Oui — le texte complet de « Lier les modèles de vue aux vues » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Swift Academy, passe à CoddyKit PRO. Le cours Swift Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Lier les modèles de vue aux vues » ?

Reliez les modèles de vue à SwiftUI et Combine. Tu pratiques Swift Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Swift Academy ?

Aucune expérience préalable n'est requise. Swift Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Lier les modèles de vue aux vues » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Swift Academy ?

Oui. Chaque leçon Swift Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Swift Academy