Canvas dans Xcode — qu'est-ce que c'est, éditeur SwiftUI et travail avec les prévisualisations

Qu'est-ce que Canvas dans Xcode ?

Canvas est un éditeur de prévisualisation intégré à Xcode, présenté pour la première fois dans Xcode 11 avec SwiftUI. Il se trouve dans le panneau droit de l'éditeur à côté du code et affiche un aperçu en direct de la SwiftUI View actuelle. Canvas fonctionne en temps réel : chaque modification du code se reflète instantanément dans l'aperçu sans recompilation manuelle.

Architecturalement, Canvas est un processus séparé (Preview Provider Extension) que Xcode lance lors de l'ouverture de Canvas. Le processus charge le PreviewProvider compilé, rend le résultat via Metal et l'affiche dans le panneau de l'éditeur. Si PreviewProvider n'est pas implémenté, Canvas affiche un espace réservé « Preview paused — No preview provider found ».

Interface de Canvas

L'interface de Canvas comprend une barre d'outils avec la sélection de l'appareil, de l'orientation, du thème de couleurs et de l'échelle. Les boutons Live Preview, Selectable et Embed In Diagram changent les modes d'interaction. Canvas prend en charge la vue fractionnée : vous pouvez ouvrir plusieurs Canvas pour différents fichiers dans le même espace de travail.

Comment fonctionne Canvas interactif

Live Preview est la fonctionnalité clé de Canvas qui rend les aperçus interactifs. Dans ce mode, Canvas rend la View dans un processus séparé et transmet les gestes (tap, glissement, défilement) au runtime SwiftUI. L'utilisateur peut appuyer sur des boutons, remplir des champs de texte et tester la navigation sans lancer le simulateur.

SwiftUI traite les gestes dans Canvas via le même système d'événements que sur un appareil réel. La différence réside dans les performances : Canvas utilise le rendu logiciel via Metal, tandis que le simulateur utilise les graphiques de l'hôte. Cela signifie que les animations complexes dans Canvas peuvent fonctionner plus lentement ou paraître différentes visuellement.

Processus de mise à jour de Canvas

La mise à jour de Canvas se fait en trois étapes. D'abord, Xcode détecte la modification du fichier et compile de manière incrémentielle uniquement le PreviewProvider modifié. Ensuite, le nouveau module binaire est chargé dans le processus PreviewProviderExtension. Enfin, SwiftUI recrée la View et la rend via Metal. Le cycle complet prend 0,5 à 2 secondes selon la complexité de la View.

struct TappableButton: View {
    @State private var count = 0
    
    var body: some View {
        Button("Tapped \(count) times") {
            count += 1
        }
        .buttonStyle(.borderedProminent)
    }
}

struct TappableButton_Previews: PreviewProvider {
    static var previews: some View {
        TappableButton()
    }
}

Interactivité : lorsque Live Preview est en cours, le bouton dans Canvas fonctionne comme un vrai — le compteur s'incrémente à chaque tap et l'animation de pression s'affiche. Cela permet de tester la logique des boutons sans simulateur.

Configuration de Canvas

Les paramètres de base de Canvas sont disponibles via le menu Editor → Canvas ou via les boutons de la barre d'outils de Canvas. Les principales options incluent la sélection de l'appareil, l'orientation, le thème sombre et l'échelle Dynamic Type. Pour les paramètres persistants, utilisez les modificateurs PreviewProvider dans le code.

Les paramètres avancés incluent : Auto Activate Preview — activation automatique de Canvas à l'ouverture d'un fichier SwiftUI ; Live Preview — mode gestuel ; Draw Live Edges — affichage des limites de la vue ; Show Preview Sizes — taille de la zone d'aperçu. Xcode enregistre ces paramètres de manière portable dans les fichiers de l'espace de travail/projet.

Configuration via PreviewProvider

La configuration programmatique offre un contrôle plus précis sur Canvas. Les modificateurs appliqués dans les aperçus remplacent les paramètres de la barre d'outils et sont enregistrés dans le code — tous les membres de l'équipe les voient via git.

struct SettingsView_Previews: PreviewProvider {
    static var previews: some View {
        SettingsView()
            .previewDevice("iPhone 16 Pro")
            .previewLayout(.device)
            .preferredColorScheme(.dark)
            .dynamicTypeSize(.xxxLarge)
            .previewDisplayName("Dark + XL Text")
    }
}

previewLayout avec .device affiche l'écran complet de l'appareil, tandis que .sizeThatFits montre un aperçu compact dont la taille s'adapte au contenu. Pour les widgets et les petits composants, utilisez .sizeThatFits — cela économise de l'espace dans l'éditeur.

Exemples de travail avec Canvas

Exemple 1 : test d'adaptabilité. Utilisez ForEach avec plusieurs appareils et thèmes de couleurs pour vous assurer que l'interface s'affiche correctement sur tous les écrans. Canvas met à jour tous les aperçus simultanément, permettant de repérer les problèmes de mise en page avant de lancer le simulateur.

Exemple 2 : aperçu avec données. Pour les Views affichant du contenu dynamique (listes, profils, cartes), créez plusieurs instances avec différentes données dans les aperçus. C'est plus rapide que de basculer entre les écrans dans le simulateur et de saisir des données.

Aperçu avec différents états

Groupe d'aperçus via Group ou ForEach permet d'afficher tous les états du composant sur un seul panneau. Pour les listes, c'est particulièrement pratique : liste vide, chargement, erreur et liste remplie sont visibles simultanément.

struct LoadingStateView: View {
    let state: LoadingState
    
    var body: some View {
        switch state {
        case .loading:
            ProgressView()
        case .loaded(let items):
            List(items, id: \.self) { Text($0) }
        case .error(let message):
            Text(message).foregroundColor(.red)
        }
    }
}

struct LoadingStateView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            LoadingStateView(state: .loading)
                .previewDisplayName("Loading")
            LoadingStateView(state: .loaded(["Item 1", "Item 2"]))
                .previewDisplayName("Loaded")
            LoadingStateView(state: .error("Failed to load"))
                .previewDisplayName("Error")
        }
    }
}

Canvas vs Simulateur — comparaison

Canvas et le Simulateur se complètent, sans se remplacer. Canvas est idéal pour l'itération rapide lors de la conception : modifier le code avec un retour immédiat. Le Simulateur est nécessaire pour la vérification finale : performances réelles, gestes personnalisés, alertes système et intégration avec les fonctions matérielles (appareil photo, capteurs).

Selon la WWDC 2024, Apple positionne Canvas comme un outil pour les premières étapes du développement et le Simulateur pour les tests d'intégration. Il est recommandé de passer 60 % du temps de développement UI dans Canvas et 40 % — à tester sur le simulateur ou un appareil.

Recommandation : concevez dans Canvas, testez sur le simulateur. Utilisez Live Preview pour la logique gestuelle des boutons et de la navigation, mais effectuez les tests finaux d'animations, de requêtes réseau et de fonctions matérielles sur le simulateur ou un appareil réel.

Conseils pour travailler avec Canvas

Conseil 1 : utilisez le mode sélectionnable. En mode sélectionnable (icône de curseur), vous pouvez cliquer sur n'importe quel élément de l'aperçu et voir sa hiérarchie, ses modificateurs et son cadre dans l'inspecteur. C'est utile pour déboguer la mise en page : vous voyez instantanément le padding, l'offset et la taille de l'élément sans impressions.

Conseil 2 : Embed In Diagram. Canvas peut regrouper des éléments : sélectionnez deux Views ou plus, cliquez sur Embed In Diagram — Canvas créera VStack/HStack/ZStack et reconstruira le code automatiquement. Cela accélère la création de hiérarchies complexes sans saisir manuellement les parenthèses.

Conseil 3 : vider le cache de prévisualisation de Canvas. Si Canvas cesse de se mettre à jour, videz Product → Preview Cache. Xcode supprimera les binaires mis en cache de PreviewProvider et les reconstruira à partir de zéro. Cela résout 90 % des problèmes de blocage de Canvas.

Optimisation de la vitesse de Canvas

Canvas lent est généralement causé par un nombre excessif d'aperçus. Pour les Views complexes, utilisez un seul aperçu au lieu d'un groupe de 6 à 8. Désactivez Live Preview pour les Views sans gestes — le mode statique rend plus rapidement. Assurez-vous que PreviewProvider utilise des simulations plutôt que de vraies requêtes réseau.

// Quick debug: minimal preview
struct ComplexView_Previews: PreviewProvider {
    static var previews: some View {
        ComplexView()
            .previewLayout(.sizeThatFits) // compact mode
    }
}

previewLayout(.sizeThatFits) est le mode le plus rapide de Canvas car il rend uniquement le contenu de la View sans les bordures de l'appareil. Utilisez-le pour la conception quotidienne, en activant .device uniquement pour les vérifications finales.