Canvas in Xcode — wat is het, SwiftUI-editor en werken met voorbeeld

Wat is Canvas in Xcode?

Canvas — de ingebouwde voorbeeld-editor van Xcode, voor het eerst geïntroduceerd in Xcode 11 samen met SwiftUI. Het bevindt zich in het rechterpaneel van de editor naast de code en toont een live voorbeeld van de huidige SwiftUI View. Canvas werkt in realtime: elke wijziging in de code wordt direct weerspiegeld in het voorbeeld zonder handmatige hercompilatie.

Architectonisch is Canvas een apart proces (Preview Provider Extension) dat Xcode start bij het openen van Canvas. Het proces laadt de gecompileerde PreviewProvider, rendert het resultaat via Metal en toont het in het editorpaneel. Als PreviewProvider niet is geïmplementeerd, toont Canvas het bericht „Preview paused — No preview provider found”.

Canvas-interface

De Canvas-interface bevat een werkbalk met apparaatselectie, oriëntatie, kleurenschema en schaal. De knoppen Live Preview, Selectable en Embed In Diagram schakelen tussen interactiemodi. Canvas ondersteunt split-view: meerdere Canvas kunnen worden geopend voor verschillende bestanden in dezelfde werkruimte.

Hoe werkt interactieve Canvas

Live Preview — de belangrijkste functionaliteit van Canvas die het voorbeeld interactief maakt. In deze modus rendert Canvas de View in een apart proces en stuurt gebaren (tik, veeg, scroll) terug naar de SwiftUI-runtime. De gebruiker kan knoppen indrukken, tekstvelden invullen en navigatie testen zonder de simulator te starten.

SwiftUI verwerkt gebaren in Canvas via hetzelfde gebeurtenissysteem als op een echt apparaat. Het verschil in prestaties: Canvas gebruikt software-rendering via Metal, terwijl de simulator host-graphics gebruikt. Dit betekent dat complexe animaties in Canvas langzamer kunnen werken of visueel kunnen verschillen.

Canvas-updateproces

Canvas-update verloopt in drie fasen. Eerst detecteert Xcode de bestandswijziging en compileert alleen de gewijzigde PreviewProvider incrementeel. Vervolgens wordt de nieuwe binaire module geladen in het PreviewProviderExtension-proces. Ten slotte hercreëert SwiftUI de View en rendert deze via Metal. De hele cyclus duurt 0.5–2 seconden, afhankelijk van de complexiteit van de View.

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

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

Interactiviteit: bij het starten van Live Preview werkt de knop in Canvas als een echte — de teller verhoogt bij elke druk, de indruk-animatie wordt getoond. Hiermee kunt u de knoplogica testen zonder simulator.

Canvas configureren

Basisinstellingen van Canvas zijn toegankelijk via het menu Editor → Canvas of via de knoppen op de werkbalk van Canvas. De belangrijkste opties omvatten apparaatselectie, oriëntatie, donkere modus en Dynamic Type-schaal. Voor permanente instellingen gebruikt u PreviewProvider-modifiers in de code.

Geavanceerde instellingen omvatten: Auto Activate Preview — automatisch inschakelen van Canvas bij het openen van een SwiftUI-bestand; Live Preview — modus met gebaren; Draw Live Edges — weergave van weergavegrenzen; Show Preview Sizes — grootte van het voorbeeldgebied. Xcode slaat deze instellingen draagbaar op in workspace-/projectbestanden.

Configureren via PreviewProvider

Programmatische configuratie biedt nauwkeurigere controle over Canvas. Modifiers toegepast in previews overschrijven de werkbalkinstellingen en worden opgeslagen in de code — alle teamleden zien ze 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 met .device toont het volledige scherm van het apparaat, en .sizeThatFits — een compact voorbeeld met een formaat aangepast aan de inhoud. Voor widgets en kleine componenten gebruikt u .sizeThatFits — dit bespaart ruimte in de editor.

Voorbeelden van werken met Canvas

Voorbeeld 1: aanpasbaarheid controleren. Gebruik ForEach met meerdere apparaten en kleurenschema's om er zeker van te zijn dat de interface er op alle schermen even goed uitziet. Canvas werkt alle voorbeelden tegelijk bij, zodat u layoutproblemen kunt opmerken voordat u de simulator start.

Voorbeeld 2: voorbeeld met gegevens. Voor View die dynamische inhoud weergeven (lijsten, profielen, kaarten), maakt u meerdere exemplaren met verschillende gegevens in previews. Dit is sneller dan schakelen tussen schermen in de simulator en gegevens invoeren.

Voorbeeld met verschillende statussen

Groep van voorbeelden via Group of ForEach maakt het mogelijk alle statussen van een component op één paneel weer te geven. Voor een lijst is dit bijzonder handig: lege lijst, laden, fout en gevulde lijst zijn gelijktijdig zichtbaar.

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 Simulator — vergelijking

Canvas en Simulator vullen elkaar aan, niet vervangen. Canvas is ideaal voor snelle iteratie bij het ontwerpen van de interface: code bewerken met onmiddellijke feedback. De simulator is nodig voor eindcontrole: echte prestaties, aangepaste gebaren, systeemmeldingen en integratie met hardwarefuncties (camera, sensoren).

Volgens WWDC 2024 positioneert Apple Canvas als een hulpmiddel voor ontwikkelaars in vroege stadia en de simulator voor integratietesten. 60% van de UI-ontwikkelingstijd wordt aanbevolen in Canvas, 40% — gecontroleerd op simulator of apparaat.

Aanbeveling: ontwerp in Canvas, test op simulator. Gebruik Live Preview voor gebarenlogica van knoppen en navigatie, maar voer de eindcontrole van animaties, netwerkverzoeken en hardwarefuncties uit op simulator of een echt apparaat.

Tips voor werken met Canvas

Tip 1: gebruik de Selectable-modus. In de Selectable-modus (cursorpictogram) kunt u op elk element in het voorbeeld klikken en de hiërarchie, modifiers en het frame ervan in de inspector bekijken. Dit is handig voor het debuggen van de layout: u ziet direct padding, offset en grootte van het element zonder prints.

Tip 2: Embed In Diagram. Canvas kan elementen groeperen: selecteer twee of meer View, klik op Embed In Diagram — Canvas maakt VStack/HStack/ZStack en herschrijft de code automatisch. Dit versnelt het maken van complexe hiërarchieën zonder handmatig haakjes te typen.

Tip 3: Canvas Preview Cache wissen. Als Canvas niet meer wordt bijgewerkt, wis dan Product → Preview Cache. Xcode verwijdert de gecachte PreviewProvider-binaire bestanden en bouwt ze opnieuw. Dit lost 90% van de problemen met vastgelopen Canvas op.

Optimalisatie van Canvas-snelheid

Langzame Canvas wordt meestal veroorzaakt door een overmatig aantal voorbeelden. Gebruik voor complexe View slechts één voorbeeld, niet een groep van 6–8. Schakel Live Preview uit voor View zonder gebaren — statische modus rendert sneller. Zorg ervoor dat PreviewProvider mocks gebruikt, geen echte netwerkverzoeken.

// Snel debuggen: minimaal voorbeeld
struct ComplexView_Previews: PreviewProvider {
    static var previews: some View {
        ComplexView()
            .previewLayout(.sizeThatFits) // compacte modus
    }
}

previewLayout(.sizeThatFits) — de snelste Canvas-modus, omdat alleen de inhoud van de View wordt gerenderd zonder apparaatkader. Gebruik het voor dagelijks werk, schakel .device alleen in voor eindcontrole.