swiftui-patterns

Modèles SwiftUI

Modèles SwiftUI modernes pour créer des interfaces utilisateur déclaratives et performantes sur les plateformes Apple. Couvre le framework Observation, la composition de vues, la navigation type-safe et l'optimisation des performances.

Quand Activer

• Construction de vues SwiftUI et gestion d'état (@State, @Observable, @Binding)
• Conception de flux de navigation avec NavigationStack
• Structuration des modèles de vue et flux de données
• Optimisation des performances de rendu pour les listes et les mises en page complexes
• Travail avec les valeurs d'environnement et l'injection de dépendances dans SwiftUI

Gestion d'État

Sélection du Property Wrapper

Choisissez le wrapper le plus simple qui correspond au besoin :

Wrapper	Cas d'Utilisation
@State	Types de valeur locaux à la vue (interrupteurs, champs de formulaire, présentation de feuille)
@Binding	Référence bidirectionnelle vers le @State du parent
classe @Observable + @State	Modèle possédé avec plusieurs propriétés
classe @Observable (sans wrapper)	Référence en lecture seule passée par le parent
@Bindable	Liaison bidirectionnelle vers une propriété @Observable
@Environment	Dépendances partagées injectées via .environment()

ViewModel @Observable

Utilisez @Observable (et non ObservableObject) — il suit les changements au niveau des propriétés afin que SwiftUI ne re-rende que les vues qui lisent la propriété modifiée :

@Observable
final class ItemListViewModel {
    private(set) var items: [Item] = []
    private(set) var isLoading = false
    var searchText = ""

    private let repository: any ItemRepository

    init(repository: any ItemRepository = DefaultItemRepository()) {
        self.repository = repository
    }

    func load() async {
        isLoading = true
        defer { isLoading = false }
        items = (try? await repository.fetchAll()) ?? []
    }
}

Vue Consommant le ViewModel

struct ItemListView: View {
    @State private var viewModel: ItemListViewModel

    init(viewModel: ItemListViewModel = ItemListViewModel()) {
        _viewModel = State(initialValue: viewModel)
    }

    var body: some View {
        List(viewModel.items) { item in
            ItemRow(item: item)
        }
        .searchable(text: $viewModel.searchText)
        .overlay { if viewModel.isLoading { ProgressView() } }
        .task { await viewModel.load() }
    }
}

Injection par Environnement

Remplacez @EnvironmentObject par @Environment :

// Injection
ContentView()
    .environment(authManager)

// Consommation
struct ProfileView: View {
    @Environment(AuthManager.self) private var auth

    var body: some View {
        Text(auth.currentUser?.name ?? "Invité")
    }
}

Composition de Vues

Extraire des Sous-vues pour Limiter l'Invalidation

Divisez les vues en petites structs ciblées. Lorsque l'état change, seule la sous-vue qui lit cet état est re-rendue :

struct OrderView: View {
    @State private var viewModel = OrderViewModel()

    var body: some View {
        VStack {
            OrderHeader(title: viewModel.title)
            OrderItemList(items: viewModel.items)
            OrderTotal(total: viewModel.total)
        }
    }
}

ViewModifier pour un Style Réutilisable

struct CardModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(.regularMaterial)
            .clipShape(RoundedRectangle(cornerRadius: 12))
    }
}

extension View {
    func cardStyle() -> some View {
        modifier(CardModifier())
    }
}

Navigation

NavigationStack Type-Safe

Utilisez NavigationStack avec NavigationPath pour un routage programmatique et type-safe :

@Observable
final class Router {
    var path = NavigationPath()

    func navigate(to destination: Destination) {
        path.append(destination)
    }

    func popToRoot() {
        path = NavigationPath()
    }
}

enum Destination: Hashable {
    case detail(Item.ID)
    case settings
    case profile(User.ID)
}

struct RootView: View {
    @State private var router = Router()

    var body: some View {
        NavigationStack(path: $router.path) {
            HomeView()
                .navigationDestination(for: Destination.self) { dest in
                    switch dest {
                    case .detail(let id): ItemDetailView(itemID: id)
                    case .settings: SettingsView()
                    case .profile(let id): ProfileView(userID: id)
                    }
                }
        }
        .environment(router)
    }
}

Performances

Utiliser des Conteneurs Lazy pour les Grandes Collections

LazyVStack et LazyHStack créent les vues uniquement lorsqu'elles sont visibles :

ScrollView {
    LazyVStack(spacing: 8) {
        ForEach(items) { item in
            ItemRow(item: item)
        }
    }
}

Identifiants Stables

Utilisez toujours des ID uniques et stables dans ForEach — évitez d'utiliser des indices de tableau :

// Utiliser la conformité Identifiable ou un id explicite
ForEach(items, id: \.stableID) { item in
    ItemRow(item: item)
}

Éviter le Travail Coûteux dans body

• N'effectuez jamais d'E/S, d'appels réseau ou de calculs lourds à l'intérieur de body
• Utilisez .task {} pour le travail asynchrone — il s'annule automatiquement lorsque la vue disparaît
• Utilisez .sensoryFeedback() et .geometryGroup() avec parcimonie dans les vues scrollables
• Minimisez .shadow(), .blur() et .mask() dans les listes — ils déclenchent un rendu hors écran

Conformité Equatable

Pour les vues au corps coûteux, conformez-vous à Equatable pour éviter les re-rendus inutiles :

struct ExpensiveChartView: View, Equatable {
    let dataPoints: [DataPoint] // DataPoint doit être conforme à Equatable

    static func == (lhs: Self, rhs: Self) -> Bool {
        lhs.dataPoints == rhs.dataPoints
    }

    var body: some View {
        // Rendu de graphique complexe
    }
}

Aperçus

Utilisez la macro #Preview avec des données mockées en ligne pour une itération rapide :

#Preview("État vide") {
    ItemListView(viewModel: ItemListViewModel(repository: EmptyMockRepository()))
}

#Preview("Chargé") {
    ItemListView(viewModel: ItemListViewModel(repository: PopulatedMockRepository()))
}

Anti-Modèles à Éviter

• Utiliser ObservableObject / @Published / @StateObject / @EnvironmentObject dans du nouveau code — migrer vers @Observable
• Mettre du travail asynchrone directement dans body ou init — utiliser .task {} ou des méthodes de chargement explicites
• Créer des modèles de vue avec @State dans des vues enfants qui ne possèdent pas les données — passer depuis le parent plutôt
• Utiliser AnyView pour l'effacement de type — préférer @ViewBuilder ou Group pour les vues conditionnelles
• Ignorer les exigences Sendable lors du passage de données vers/depuis des acteurs

Références

Voir le skill : swift-actor-persistence pour les modèles de persistance basés sur les acteurs. Voir le skill : swift-protocol-di-testing pour l'injection de dépendances basée sur les protocoles et les tests avec Swift Testing.