Xcode-də Canvas — bu nədir, SwiftUI redaktoru və ön izləmə ilə iş

Xcode-də Canvas nədir?

Canvas — Xcode 11-də SwiftUI ilə birlikdə təqdim edilmiş daxili ön izləmə redaktoru. O, redaktorun sağ panelində kodun yanında yerləşir və cari SwiftUI View-in canlı ön izləməsini göstərir. Canvas real vaxt rejimində işləyir: koddakı hər dəyişiklik əl ilə yenidən kompilyasiya etmədən dərhal ön izləmədə əks olunur.

Memarlıq baxımından Canvas ayrıca bir prosesdir (Preview Provider Extension), Xcode onu Canvas açıldıqda işə salır. Proses tərtib edilmiş PreviewProvider-ı yükləyir, nəticəni Metal vasitəsilə render edir və redaktor panelində göstərir. PreviewProvider tətbiq edilməyibsə, Canvas „Preview paused — No preview provider found” xəbərdarlığını göstərir.

Canvas interfeysi

Canvas interfeysi cihaz seçimi, oriyentasiya, rəng sxemi və miqyas seçimi ilə alətlər panelini ehtiva edir. Live Preview, Selectable və Embed In Diagram düymələri qarşılıqlı əlaqə rejimlərini dəyişir. Canvas split-view dəstəkləyir: bir iş sahəsində müxtəlif fayllar üçün bir neçə Canvas açmaq olar.

Interaktiv Canvas necə işləyir

Live Preview — Canvas-ın əsas imkanıdır, ön izləməni interaktiv edir. Bu rejimdə Canvas View-i ayrıca prosesdə render edir və jestləri (toxunma, sürüşdürmə, sürüştürmə) SwiftUI işləmə mühitinə qaytarır. İstifadəçi simulyatoru işə salmadan düymələrə basa, mətn sahələrini doldura və naviqasiyanı sınaya bilər.

SwiftUI Canvas-də jestləri real cihazdakı kimi eyni hadisə sistemi vasitəsilə idarə edir. Performans fərqi: Canvas Metal vasitəsilə proqram təminatı renderindən istifadə edir, simulyator isə host qrafikasından. Bu o deməkdir ki, mürəkkəb animasiyalar Canvas-də daha yavaş işləyə və ya vizual olaraq fərqlənə bilər.

Canvas yenilənmə prosesi

Canvas-ın yenilənməsi üç mərhələdə baş verir. Əvvəlcə Xcode fayl dəyişikliyini aşkarlayır və yalnız dəyişdirilmiş PreviewProvider-ı artımlı şəkildə kompilyasiya edir. Sonra yeni binar modul PreviewProviderExtension prosesinə yüklənir. Nəhayət, SwiftUI View-i yenidən yaradır və Metal vasitəsilə render edir. Bütün dövr View-in mürəkkəbliyindən asılı olaraq 0.5–2 saniyə çəkir.

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

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

Interaktivlik: Live Preview işə salındıqda Canvas-dəki düymə real düymə kimi işləyir — hər basışda sayıcı artır, basma animasiyası göstərilir. Bu, simulyator olmadan düymə məntiqini sınamağa imkan verir.

Canvas-ın qurulması

Əsas parametrlər Canvas-a Editor → Canvas menyusu və ya Canvas alətlər panelindəki düymələr vasitəsilə daxil olmaq olar. Əsas seçimlərə cihaz, oriyentasiya, qaranlıq tema və Dynamic Type miqyası daxildir. Daimi parametrlər üçün koddakı PreviewProvider modifikatorlarından istifadə edin.

Qabaqcıl parametrlər: Auto Activate Preview — SwiftUI faylı açılanda Canvas-ın avtomatik aktivləşməsi; Live Preview — jest rejimi; Draw Live Edges — görünüş sərhədlərinin göstərilməsi; Show Preview Sizes — ön izləmə sahəsinin ölçüsü. Xcode bu parametrləri workspace/layihə fayllarında portativ şəkildə saxlayır.

PreviewProvider vasitəsilə qurulma

Proqram təminatı qurulması Canvas üzərində daha dəqiq nəzarət verir. previews-də tətbiq edilən modifikatorlar alətlər paneli parametrlərini ləğv edir və koddakı parametrlər git vasitəsilə komandanın bütün üzvləri tərəfindən görünür.

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 ilə cihazın tam ekranını, .sizeThatFits isə məzmuna uyğunlaşdırılmış ölçüdə kompakt ön izləməni göstərir. Vidjetlər və kiçik komponentlər üçün .sizeThatFits istifadə edin — bu redaktorda yerə qənaşt edir.

Canvas ilə iş nümunələri

Nümunə 1: adaptivliyin yoxlanması. Bir neçə cihaz və rəng sxemi ilə ForEach istifadə edərək interfeysin bütün ekranlarda eyni dərəcədə yaxşı göründüyünə əmin olun. Canvas bütün ön izləmələri eyni vaxtda yeniləyir və simulyatoru işə salmamış layout problemlərini görməyə imkan verir.

Nümunə 2: məlumatlarla ön izləmə. Dinamik məzmun göstərən View-lər (siyahılar, profillər, kartlar) üçün previews-də müxtəlif məlumatlarla bir neçə nüsxə yaradın. Bu, simulyatorda ekranlar arasında keçid etməkdən və məlumat daxil etməkdən daha sürətlidir.

Müxtəlif vəziyyətlərlə ön izləmə

Ön izləmə qrupu Group və ya ForEach vasitəsilə komponentin bütün vəziyyətlərini bir paneldə göstərməyə imkan verir. Bu siyahı üçün xüsusilə əlverişlidir: boş siyahı, yüklənmə, xəta və dolu siyahı eyni anda görünür.

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 — müqayisə

Canvas və Simulator bir-birini tamamlayır, əvəz etmir. Canvas interfeysin hazırlanması zamanı sürətli iterasiya üçün idealdır: dərhal əks əlaqə ilə kod redaktəsi. Simulator yekun yoxlama üçün lazımdır: real performans, xüsusi jestlər, sistem xəbərdarlıqları və aparat funksiyaları ilə inteqrasiya (kamera, sensorlar).

WWDC 2024-ə görə, Apple Canvas-ı ilkin mərhələlərdə tərtibatçı aləti, Simulatoru isə inteqrasiya testi mərhələsi üçün yerləşdirir. UI inkişaf vaxtının 60%-ını Canvas-da, 40%-ını isə simulyator və ya cihazda yoxlamağa sərf etmək tövsiyə olunur.

Tövsiyə: interfeysi Canvas-da hazırlayın, simulyatorda sınayın. Düymə və naviqasiya jest məntiqi üçün Live Preview-dən istifadə edin, lakin animasiyaların, şəbəkə sorğularının və aparat funksiyalarının yekun yoxlamasını simulyator və ya real cihazda aparın.

Canvas ilə iş üzrə məsləhətlər

Məsləhət 1: Selectable rejimindən istifadə edin. Selectable rejimində (kursor ikonu) ön izləmədəki istənilən elementə klikləyib onun iyerarxiyasını, modifikatorlarını və çərçivəsini inspektorda görə bilərsiniz. Bu, layoutun sazlanması üçün faydalıdır: çap etmədən dərhal padding, offset və element ölçüsünü görürsünüz.

Məsləhət 2: Embed In Diagram. Canvas elementləri qruplaşdıra bilir: iki və ya daha çox View seçin, Embed In Diagram düyməsini basın — Canvas VStack/HStack/ZStack yaradacaq və kodu avtomatik yenidən yazacaq. Bu, əl ilə mötərizə yazmadan mürəkkəb iyerarxiya yaratmağı sürətləndirir.

Məsləhət 3: Canvas Preview Cache-ın təmizlənməsi. Canvas yenilənməyi dayandırarsa, Product → Preview Cache-i təmizləyin. Xcode keşlənmiş PreviewProvider binar fayllarını siləcək və onları sıfırdan quracaqlar. Bu, Canvas-ın donması ilə bağlı problemlərin 90%-ını həll edir.

Canvas sürətinin optimallaşdırılması

Yavaş Canvas adətən həddən artıq ön izləmə səbəbindən yaranır. Mürəkkəb View-lər üçün 6–8 qrup əvəzinə yalnız bir ön izləmə istifadə edin. Jestləri olmayan View-lər üçün Live Preview-i söndürün — statik rejim daha sürətli render edir. PreviewProvider-ın real şəbəkə sorğuları deyil, mock məlumatlarından istifadə etdiyinə əmin olun.

// Sürətli sazlama: minimal ön izləmə
struct ComplexView_Previews: PreviewProvider {
    static var previews: some View {
        ComplexView()
            .previewLayout(.sizeThatFits) // kompakt rejim
    }
}

previewLayout(.sizeThatFits) — Canvas-ın ən sürətli rejimi, çünki cihaz çərçivəsi olmadan yalnız View məzmunu render olunur. Gündəlik iş üçün istifadə edin, .device rejimini yalnız yekun yoxlama üçün aktivləşdirin.