Patterns d'interface SwiftUI

Déclencheurs

• swiftui
• swift
• ios
• macos
• apple
• xcode
• swift ui
• ios app
• mac app
• watchos
• tvos
• swift view
• modifier

Démarrage rapide

Choisissez une piste selon votre objectif :

Projet existant

• Identifiez la fonctionnalité ou l'écran et le modèle d'interaction principal (liste, détail, éditeur, paramètres, onglets).
• Trouvez un exemple proche dans le repo avec rg "TabView\(" ou similaire, puis lisez la vue SwiftUI la plus proche.
• Appliquez les conventions locales : préférez l'état natif SwiftUI, gardez l'état local quand possible, et utilisez l'injection d'environnement pour les dépendances partagées.
• Choisissez la référence de composant pertinente dans references/components-index.md et suivez ses directives.
• Construisez la vue avec de petites sous-vues ciblées et un flux de données natif SwiftUI.

Échafaudage de nouveau projet

• Commencez par references/app-scaffolding-wiring.md pour câbler TabView + NavigationStack + sheets.
• Ajoutez un AppTab et un RouterPath minimaux basés sur les squelettes fournis.
• Choisissez la prochaine référence de composant en fonction de l'interface que vous devez d'abord construire (TabView, NavigationStack, Sheets).
• Développez les énumérations de route et de sheet au fur et à mesure que de nouveaux écrans sont ajoutés.

Règles générales à suivre

• Utilisez l'état SwiftUI moderne (@State, @Binding, @Observable, @Environment) et évitez les view models inutiles.
• Préférez la composition ; gardez les vues petites et ciblées.
• Utilisez async/await avec .task et des états de chargement/erreur explicites.
• Maintenez les schémas hérités existants uniquement lors de la modification de fichiers hérités.
• Suivez le formateur et le guide de style du projet.
• Sheets : Préférez .sheet(item:) à .sheet(isPresented:) quand l'état représente un modèle sélectionné. Évitez if let à l'intérieur du corps d'une sheet. Les sheets doivent posséder leurs actions et appeler dismiss() en interne plutôt que de transférer les closures onCancel/onConfirm.

Flux de travail pour une nouvelle vue SwiftUI

1. Définissez l'état de la vue et son emplacement de propriété.
2. Identifiez les dépendances à injecter via @Environment.
3. Esquissez la hiérarchie de vue et extrayez les éléments répétés dans des sous-vues.
4. Implémentez le chargement asynchrone avec .task et une énumération d'état explicite si nécessaire.
5. Ajoutez des libellés d'accessibilité ou des identifiants quand l'interface est interactive.
6. Validez avec une compilation et mettez à jour les callsites d'utilisation si nécessaire.

Références de composants

Utilisez references/components-index.md comme point d'entrée. Chaque référence de composant doit inclure :

• L'intention et les scénarios les mieux adaptés.
• Un schéma d'utilisation minimal avec des conventions locales.
• Les pièges et les notes de performance.
• Les chemins vers des exemples existants dans le repo actuel.

Schémas de sheet

Sheet pilotée par élément (préféré)

@State private var selectedItem: Item?

.sheet(item: $selectedItem) { item in
    EditItemSheet(item: item)
}

Sheet possède ses actions

struct EditItemSheet: View {
    @Environment(\.dismiss) private var dismiss
    @Environment(Store.self) private var store

    let item: Item
    @State private var isSaving = false

    var body: some View {
        VStack {
            Button(isSaving ? "Saving…" : "Save") {
                Task { await save() }
            }
        }
    }

    private func save() async {
        isSaving = true
        await store.save(item)
        dismiss()
    }
}

Ajouter une nouvelle référence de composant

• Créez references/<component>.md.
• Gardez-la courte et exploitable ; créez des liens vers des fichiers concrets du repo actuel.
• Mettez à jour references/components-index.md avec la nouvelle entrée.

Vérifier

• La modification a été rendue dans un navigateur/simulateur et une capture d'écran ou un snapshot DOM a été capturé, pas seulement passée en revue de code
• La disposition a été vérifiée aux points de rupture que le guide des patterns d'interface SwiftUI énumère (mobile + desktop minimum) ; une preuve de chacun est jointe
• Les valeurs de couleur, typographie et espacement utilisées proviennent des tokens de design / thème du projet, pas de valeurs ad-hoc codées en dur
• La navigation au clavier et l'ordre de focus ont été testés sur chaque élément interactif introduit
• Les variantes avec mouvement réduit / mode sombre (si supporté) ont été vérifiées, pas simplement supposées d'hériter
• Aucune erreur de console ou avertissement d'hydratation n'a été émis lors du rendu de vérification