Canvas в Xcode — какво е това, SwiftUI редактор и работа с преглед

Какво е Canvas в Xcode?

Canvas — вграденият редактор за преглед на Xcode, представен за първи път в Xcode 11 заедно със SwiftUI. Намира се в десния панел на редактора до кода и показва жив преглед на текущата SwiftUI View. Canvas работи в реално време: всяка промяна в кода незабавно се отразява в прегледа без ръчно прекомпилиране.

Архитектурно, Canvas е отделен процес (Preview Provider Extension), който Xcode стартира при отваряне на Canvas. Процесът зарежда компилирания PreviewProvider, рендира резултата чрез Metal и го показва в панела на редактора. Ако PreviewProvider не е имплементиран, Canvas показва съобщението „Preview paused — No preview provider found“.

Интерфейс на Canvas

Интерфейсът на Canvas включва лента с инструменти за избор на устройство, ориентация, цветова схема и мащаб. Бутоните Live Preview, Selectable и Embed In Diagram превключват режимите на взаимодействие. Canvas поддържа разделен изглед (split-view): могат да се отворят няколко Canvas за различни файлове в една работна област.

Как работи интерактивният Canvas

Live Preview — ключовата възможност на Canvas, която прави прегледа интерактивен. В този режим Canvas рендира View в отделен процес и предава жестовете (докосване, плъзгане, превъртане) обратно в runtime на SwiftUI. Потребителят може да натиска бутони, да попълва текстови полета и да тества навигация без стартиране на симулатора.

SwiftUI обработва жестовете в Canvas чрез същата система за събития като на реално устройство. Разликата в производителността: Canvas използва софтуерно рендиране чрез Metal, докато симулаторът използва хост графика. Това означава, че сложните анимации в Canvas може да работят по-бавно или да се различават визуално.

Процес на актуализация на Canvas

Актуализацията на Canvas се извършва на три етапа. Първо, Xcode открива промяната на файла и инкрементално компилира само променения PreviewProvider. След това новият двоичен модул се зарежда в процеса PreviewProviderExtension. Накрая, SwiftUI пресъздава View и я рендира чрез Metal. Целият цикъл отнема 0.5–2 секунди в зависимост от сложността на View.

struct TappableButton: View {
    @State private var count = 0
    
    var body: some View {
        Button("Докоснато \(count) пъти") {
            count += 1
        }
        .buttonStyle(.borderedProminent)
    }
}

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

Интерактивност: при стартиране на Live Preview, бутонът в Canvas работи като истински — броячът се увеличава при всяко натискане, анимацията на натискане се показва. Това позволява тестване на логиката на бутоните без симулатор.

Настройка на Canvas

Основните настройки на Canvas са достъпни чрез менюто Editor → Canvas или чрез бутоните на лентата с инструменти на самия Canvas. Основните опции включват избор на устройство, ориентация, тъмна тема и мащаб на Dynamic Type. За постоянни настройки използвайте PreviewProvider модификатори в кода.

Разширените настройки включват: Auto Activate Preview — автоматично активиране на Canvas при отваряне на SwiftUI файл; Live Preview — режим с жестове; Draw Live Edges — показване на границите на изгледа; Show Preview Sizes — размер на зоната за преглед. Xcode записва тези настройки преносимо във файловете на workspace/проекта.

Настройка чрез PreviewProvider

Програмната настройка предоставя по-прецизен контрол над Canvas. Модификаторите, приложени в previews, отменят настройките на лентата с инструменти и се записват в кода — всички членове на екипа ги виждат чрез 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 с .device показва пълния екран на устройството, а .sizeThatFits — компактен преглед с размер, съобразен със съдържанието. За джаджи и малки компоненти използвайте .sizeThatFits — това спестява място в редактора.

Примери за работа с Canvas

Пример 1: проверка на адаптивност. Използвайте ForEach с няколко устройства и цветови схеми, за да се уверите, че интерфейсът изглежда еднакво добре на всички екрани. Canvas актуализира всички прегледи едновременно, позволявайки да забележите проблеми с оформлението преди стартиране на симулатора.

Пример 2: преглед с данни. За View, които показват динамично съдържание (списъци, профили, карти), създайте няколко инстанции с различни данни в previews. Това е по-бързо от превключване между екрани в симулатора и въвеждане на данни.

Преглед с различни състояния

Група от прегледи чрез Group или ForEach позволява показване на всички състояния на компонент на един панел. За списък това е особено удобно: празен списък, зареждане, грешка и попълнен списък са видими едновременно.

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 срещу Simulator — сравнение

Canvas и Simulator се допълват взаимно, не се заместват. Canvas е идеален за бърза итерация при проектиране на интерфейса: редактиране на код с незабавна обратна връзка. Simulator е необходим за окончателна проверка: реална производителност, персонализирани жестове, системни предупреждения и интеграция с хардуерни функции (камера, сензори).

Според WWDC 2024, Apple позиционира Canvas като инструмент за разработчици в ранните етапи, а Simulator — за етапа на интеграционно тестване. 60% от времето за разработка на UI се препоръчва в Canvas, 40% — проверка на симулатор или устройство.

Препоръка: проектирайте в Canvas, тествайте на симулатор. Използвайте Live Preview за логика на жестове на бутони и навигация, но окончателната проверка на анимации, мрежови заявки и хардуерни функции извършете на симулатор или реално устройство.

Съвети за работа с Canvas

Съвет 1: използвайте режим Selectable. В режим Selectable (икона на курсор) можете да кликнете върху всеки елемент от прегледа и да видите неговата йерархия, модификатори и рамка в инспектора. Това е полезно за отстраняване на проблеми с оформлението: виждате незабавно padding, offset и размер на елемента без принтиране.

Съвет 2: Embed In Diagram. Canvas може да групира елементи: изберете две или повече View, кликнете Embed In Diagram — Canvas ще създаде VStack/HStack/ZStack и автоматично ще препише кода. Това ускорява създаването на сложна йерархия без ръчно въвеждане на скоби.

Съвет 3: изчистване на кеша на Canvas Preview. Ако Canvas спре да се актуализира, изчистете Product → Preview Cache. Xcode ще изтрие кешираните двоични файлове на PreviewProvider и ще ги изгради отначало. Това решава 90% от проблемите със забит Canvas.

Оптимизация на скоростта на Canvas

Бавният Canvas обикновено се причинява от прекалено много прегледи. За сложни View използвайте само един преглед, а не група от 6–8. Изключете Live Preview за View без жестове — статичният режим рендира по-бързо. Уверете се, че PreviewProvider използва mock данни, а не реални мрежови заявки.

// Бързо отстраняване на грешки: минимален преглед
struct ComplexView_Previews: PreviewProvider {
    static var previews: some View {
        ComplexView()
            .previewLayout(.sizeThatFits) // компактен режим
    }
}

previewLayout(.sizeThatFits) — най-бързият режим на Canvas, тъй като се рендира само съдържанието на View без рамка на устройството. Използвайте го за ежедневна работа, включете .device само за окончателна проверка.