Canvas in Xcode — cos'è, editor SwiftUI e lavoro con le anteprime

Cos'è Canvas in Xcode?

Canvas è un editor di anteprima integrato in Xcode, presentato per la prima volta in Xcode 11 insieme a SwiftUI. Si trova nel pannello destro dell'editor accanto al codice e mostra un'anteprima live della SwiftUI View corrente. Canvas funziona in tempo reale: ogni modifica al codice si riflette istantaneamente nell'anteprima senza ricompilazione manuale.

Architetturalmente, Canvas è un processo separato (Preview Provider Extension) che Xcode avvia all'apertura di Canvas. Il processo carica il PreviewProvider compilato, renderizza il risultato tramite Metal e lo visualizza nel pannello dell'editor. Se PreviewProvider non è implementato, Canvas mostra un segnaposto “Preview paused — No preview provider found”.

Interfaccia di Canvas

L'interfaccia di Canvas include una barra degli strumenti con selezione del dispositivo, orientamento, schema colori e scala. I pulsanti Live Preview, Selectable e Embed In Diagram cambiano le modalità di interazione. Canvas supporta la vista divisa: è possibile aprire più Canvas per file diversi nello stesso spazio di lavoro.

Come funziona Canvas interattivo

Live Preview è la funzionalità chiave di Canvas che rende le anteprime interattive. In questa modalità, Canvas renderizza la View in un processo separato e passa i gesti (tocco, scorrimento, swipe) al runtime di SwiftUI. L'utente può premere pulsanti, compilare campi di testo e testare la navigazione senza avviare il simulatore.

SwiftUI elabora i gesti in Canvas attraverso lo stesso sistema di eventi di un dispositivo reale. La differenza sta nelle prestazioni: Canvas utilizza il rendering software tramite Metal, mentre il simulatore utilizza la grafica dell'host. Ciò significa che le animazioni complesse in Canvas potrebbero funzionare più lentamente o avere un aspetto visivamente diverso.

Processo di aggiornamento di Canvas

L'aggiornamento di Canvas avviene in tre fasi. Innanzitutto, Xcode rileva la modifica del file e compila in modo incrementale solo il PreviewProvider modificato. Quindi, il nuovo modulo binario viene caricato nel processo PreviewProviderExtension. Infine, SwiftUI ricrea la View e la renderizza tramite Metal. L'intero ciclo richiede 0,5–2 secondi a seconda della complessità della 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()
    }
}

Interattività: quando Live Preview è in esecuzione, il pulsante in Canvas funziona come uno reale — il contatore aumenta a ogni tocco e viene visualizzata l'animazione di pressione. Ciò consente di testare la logica dei pulsanti senza il simulatore.

Configurazione di Canvas

Impostazioni di base di Canvas sono disponibili tramite il menu Editor → Canvas o tramite i pulsanti della barra degli strumenti di Canvas. Le opzioni principali includono la selezione del dispositivo, l'orientamento, il tema scuro e la scala Dynamic Type. Per impostazioni permanenti, utilizzare i modificatori PreviewProvider nel codice.

Impostazioni avanzate includono: Auto Activate Preview — attivazione automatica di Canvas all'apertura di un file SwiftUI; Live Preview — modalità gesti; Draw Live Edges — visualizzazione dei bordi della vista; Show Preview Sizes — dimensione dell'area di anteprima. Xcode salva queste impostazioni in modo portatile nei file del workspace/progetto.

Configurazione tramite PreviewProvider

Configurazione programmatica offre un controllo più preciso su Canvas. I modificatori applicati nelle anteprime sovrascrivono le impostazioni della barra degli strumenti e vengono salvati nel codice — tutti i membri del team li vedono tramite 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 con .device mostra lo schermo completo del dispositivo, mentre .sizeThatFits mostra un'anteprima compatta con dimensione adattata al contenuto. Per widget e componenti piccoli, utilizzare .sizeThatFits — risparmia spazio nell'editor.

Esempi di lavoro con Canvas

Esempio 1: test di adattabilità. Utilizzare ForEach con più dispositivi e schemi colore per garantire che l'interfaccia appaia bene su tutti gli schermi. Canvas aggiorna tutte le anteprime contemporaneamente, consentendo di individuare problemi di layout prima di avviare il simulatore.

Esempio 2: anteprima con dati. Per Views che mostrano contenuti dinamici (elenchi, profili, schede), creare più istanze con dati diversi nelle anteprime. Questo è più veloce che passare da una schermata all'altra nel simulatore e inserire dati.

Anteprima con stati diversi

Gruppo di anteprime tramite Group o ForEach consente di visualizzare tutti gli stati del componente su un unico pannello. Per gli elenchi questo è particolarmente comodo: elenco vuoto, caricamento, errore ed elenco popolato sono visibili contemporaneamente.

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 Simulatore — confronto

Canvas e Simulatore si completano a vicenda, anziché sostituirsi. Canvas è ideale per iterazioni rapide durante il layout: modificare il codice con feedback immediato. Il Simulatore è necessario per la verifica finale: prestazioni reali, gesti personalizzati, avvisi di sistema e integrazione con funzionalità hardware (fotocamera, sensori).

Secondo la WWDC 2024, Apple posiziona Canvas come strumento per le fasi iniziali dello sviluppo e il Simulatore per i test di integrazione. Si consiglia di dedicare il 60% del tempo di sviluppo dell'interfaccia in Canvas e il 40% — ai test sul simulatore o dispositivo.

Raccomandazione: progettare in Canvas, testare sul simulatore. Utilizzare Live Preview per la logica gestuale di pulsanti e navigazione, ma eseguire i test finali di animazioni, richieste di rete e funzioni hardware sul simulatore o su un dispositivo reale.

Consigli per lavorare con Canvas

Consiglio 1: utilizzare la modalità selezionabile. In modalità selezionabile (icona cursore), è possibile fare clic su qualsiasi elemento dell'anteprima e visualizzarne la gerarchia, i modificatori e il frame nell'ispettore. Ciò è utile per il debug del layout: si vedono immediatamente padding, offset e dimensione dell'elemento senza stampe.

Consiglio 2: Embed In Diagram. Canvas può raggruppare elementi: selezionare due o più Views, fare clic su Embed In Diagram — Canvas creerà VStack/HStack/ZStack e ricostruirà il codice automaticamente. Questo accelera la creazione di gerarchie complesse senza digitare manualmente le parentesi.

Consiglio 3: cancellare la cache di anteprima di Canvas. Se Canvas smette di aggiornarsi, cancellare Product → Preview Cache. Xcode eliminerà i binari cache di PreviewProvider e li ricostruirà da zero. Questo risolve il 90% dei problemi di blocco di Canvas.

Ottimizzazione della velocità di Canvas

Canvas lento è solitamente causato da un numero eccessivo di anteprime. Per Views complesse, utilizzare una sola anteprima invece di un gruppo di 6–8. Disattivare Live Preview per Views senza gesti — la modalità statica esegue il rendering più velocemente. Assicurarsi che PreviewProvider utilizzi mock invece di richieste di rete reali.

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

previewLayout(.sizeThatFits) è la modalità più veloce di Canvas perché renderizza solo il contenuto della View senza i bordi del dispositivo. Utilizzarla per il layout quotidiano, attivando .device solo per i controlli finali.