Canvas w Xcode — co to jest, edytor SwiftUI i praca z podglądem

Czym jest Canvas w Xcode?

Canvas — wbudowany edytor podglądu Xcode, po raz pierwszy przedstawiony w Xcode 11 razem ze SwiftUI. Znajduje się w prawym panelu edytora obok kodu i wyświetla podgląd na żywo bieżącej SwiftUI View. Canvas działa w trybie rzeczywistym: każda zmiana w kodzie natychmiast odzwierciedla się w podglądzie bez ręcznej rekompilacji.

Architektonicznie Canvas to oddzielny proces (Preview Provider Extension), który Xcode uruchamia przy otwarciu Canvas. Proces ładuje skompilowany PreviewProvider, renderuje wynik przez Metal i wyświetla w panelu edytora. Jeśli PreviewProvider nie jest zaimplementowany, Canvas pokazuje zastępczy komunikat „Preview paused — No preview provider found”.

Interfejs Canvas

Interfejs Canvas zawiera panel narzędzi z wyborem urządzenia, orientacji, schematu kolorów i skali. Przyciski Live Preview, Selectable i Embed In Diagram przełączają tryby interakcji. Canvas obsługuje split-view: można otworzyć kilka Canvas dla różnych plików w jednym obszarze roboczym.

Jak działa interaktywny Canvas

Live Preview — kluczowa możliwość Canvas, która czyni podgląd interaktywnym. W tym trybie Canvas renderuje View w oddzielnym procesie i przekazuje gesty (tapnięcie, przesunięcie, przewijanie) z powrotem do środowiska wykonawczego SwiftUI. Użytkownik może naciskać przyciski, wypełniać pola tekstowe i testować nawigację bez uruchamiania symulatora.

SwiftUI obsługuje gesty w Canvas przez ten sam system zdarzeń, co na rzeczywistym urządzeniu. Różnica w wydajności: Canvas używa renderowania programowego przez Metal, podczas gdy symulator — grafikę hosta. Oznacza to, że złożone animacje w Canvas mogą działać wolniej lub różnić się wizualnie.

Proces aktualizacji Canvas

Aktualizacja Canvas odbywa się w trzech etapach. Najpierw Xcode wykrywa zmianę pliku i kompiluje inkrementalnie tylko zmieniony PreviewProvider. Następnie nowy moduł binarny jest ładowany do procesu PreviewProviderExtension. W końcu SwiftUI odtwarza View i renderuje je przez Metal. Cały cykl trwa 0.5–2 sekund w zależności od złożoności View.

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

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

Interaktywność: po uruchomieniu Live Preview przycisk w Canvas działa jak prawdziwy — licznik zwiększa się przy każdym naciśnięciu, animacja naciśnięcia jest wyświetlana. Pozwala to testować logikę przycisków bez symulatora.

Konfiguracja Canvas

Podstawowe ustawienia Canvas są dostępne przez menu Editor → Canvas lub przez przyciski na panelu narzędzi samego Canvas. Główne opcje obejmują wybór urządzenia, orientacji, trybu ciemnego i skali Dynamic Type. Do stałych ustawień używaj modyfikatorów PreviewProvider w kodzie.

Zaawansowane ustawienia obejmują: Auto Activate Preview — automatyczne włączanie Canvas przy otwieraniu pliku SwiftUI; Live Preview — tryb z gestami; Draw Live Edges — wyświetlanie granic widoków; Show Preview Sizes — rozmiar obszaru podglądu. Xcode zapisuje te ustawienia przenośnie w plikach workspace/projektu.

Konfiguracja przez PreviewProvider

Konfiguracja programowa zapewnia dokładniejszą kontrolę nad Canvas. Modyfikatory zastosowane w previews nadpisują ustawienia panelu narzędzi i są przechowywane w kodzie — widzą je wszyscy członkowie zespołu przez 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 z .device wyświetla pełny ekran urządzenia, a .sizeThatFits — kompaktowy podgląd z rozmiarem dopasowanym do zawartości. Dla widżetów i małych komponentów używaj .sizeThatFits — to oszczędza miejsce w edytorze.

Przykłady pracy z Canvas

Przykład 1: testowanie adaptywności. Użyj ForEach z kilkoma urządzeniami i schematami kolorów, aby upewnić się, że interfejs wygląda dobrze na wszystkich ekranach. Canvas aktualizuje wszystkie podglądy jednocześnie, pozwalając zauważyć problemy z układem przed uruchomieniem symulatora.

Przykład 2: podgląd z danymi. Dla View wyświetlających dynamiczną treść (listy, profile, karty) twórz kilka instancji z różnymi danymi w previews. To szybsze niż przełączanie się między ekranami w symulatorze i wprowadzanie danych.

Podgląd z różnymi stanami

Grupa podglądów przez Group lub ForEach pozwala wyświetlić wszystkie stany komponentu na jednym panelu. Dla listy jest to szczególnie wygodne: pusta lista, ładowanie, błąd i wypełniona lista są widoczne jednocześnie.

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 — porównanie

Canvas i Simulator uzupełniają się, a nie zastępują. Canvas jest idealny do szybkiej iteracji podczas tworzenia interfejsu: edycja kodu z natychmiastowym sprzężeniem zwrotnym. Simulator jest niezbędny do końcowej weryfikacji: rzeczywista wydajność, niestandardowe gesty, alerty systemowe i integracja z funkcjami sprzętowymi (kamera, czujniki).

Według WWDC 2024, Apple pozycjonuje Canvas jako narzędzie dla programisty na wczesnych etapach, a Simulator — na etapie testów integracyjnych. 60% czasu tworzenia UI zaleca się spędzać w Canvas, 40% — testować na symulatorze lub urządzeniu.

Zalecenie: twórz interfejs w Canvas, testuj na symulatorze. Użyj Live Preview do logiki gestów przycisków i nawigacji, ale końcową weryfikację animacji, zapytań sieciowych i funkcji sprzętowych przeprowadź na symulatorze lub rzeczywistym urządzeniu.

Porady dotyczące pracy z Canvas

Porada 1: używaj trybu Selectable. W trybie Selectable (ikona kursora) można kliknąć na dowolny element podglądu i zobaczyć jego hierarchię, modyfikatory i ramkę w inspektorze. Jest to przydatne do debugowania układu: natychmiast widzisz padding, offset i rozmiar elementu bez printów.

Porada 2: Embed In Diagram. Canvas umie grupować elementy: zaznacz dwie lub więcej View, kliknij Embed In Diagram — Canvas utworzy VStack/HStack/ZStack i automatycznie przepisze kod. To przyspiesza tworzenie złożonej hierarchii bez ręcznego wpisywania nawiasów.

Porada 3: czyszczenie pamięci podręcznej Canvas. Jeśli Canvas przestał się aktualizować, wyczyść Product → Preview Cache. Xcode usunie zbuforowane binarne pliki PreviewProvider i zbuduje je od nowa. To rozwiązuje 90% problemów z zawieszonym Canvas.

Optymalizacja szybkości Canvas

Wolny Canvas jest zwykle spowodowany nadmierną liczbą podglądów. Dla złożonych View używaj tylko jednego podglądu, a nie grupy 6–8. Wyłącz Live Preview dla View bez gestów — tryb statyczny renderuje się szybciej. Upewnij się, że PreviewProvider używa mocków, a nie rzeczywistych zapytań sieciowych.

// Szybkie debugowanie: minimalny podgląd
struct ComplexView_Previews: PreviewProvider {
    static var previews: some View {
        ComplexView()
            .previewLayout(.sizeThatFits) // tryb kompaktowy
    }
}

previewLayout(.sizeThatFits) — najszybszy tryb Canvas, ponieważ renderowana jest tylko zawartość View bez ramek urządzenia. Używaj go do codziennej pracy nad interfejsem, włączaj .device tylko do końcowej weryfikacji.