Xcode-da Canvas — bu nima, SwiftUI muharriri va oldindan ko'rish bilan ishlash

Xcode-da Canvas nima?

Canvas — Xcode 11-da SwiftUI bilan birga taqdim etilgan o'rnatilgan oldindan ko'rish muharriri. U muharrirning o'ng panelida kod yonida joylashgan va joriy SwiftUI View-ning jonli oldindan ko'rishini ko'rsatadi. Canvas real vaqt rejimida ishlaydi: koddagi har bir o'zgarish qo'lda qayta kompilyatsiya qilmasdan darhol oldindan ko'rishda aks etadi.

Arxitektura nuqtai nazaridan Canvas bu alohida jarayon (Preview Provider Extension) bo'lib, Xcode uni Canvas ochilganda ishga tushiradi. Jarayon kompilyatsiya qilingan PreviewProvider-ni yuklaydi, natijani Metal orqali renderlaydi va muharrir panelida ko'rsatadi. Agar PreviewProvider amalga oshirilmagan bo'lsa, Canvas „Preview paused — No preview provider found” xabarini ko'rsatadi.

Canvas interfeysi

Canvas interfeysi qurilma, orientatsiya, rang sxemasi va masshtab tanlash bilan asboblar panelini o'z ichiga oladi. Live Preview, Selectable va Embed In Diagram tugmalari o'zaro ta'sir rejimlarini o'zgartiradi. Canvas split-view-ni qo'llab-quvvatlaydi: bir ish maydonida turli fayllar uchun bir nechta Canvas ochish mumkin.

Interaktiv Canvas qanday ishlaydi

Live Preview — Canvas-ning asosiy imkoniyati bo'lib, oldindan ko'rishni interaktiv qiladi. Bu rejimda Canvas View-ni alohida jarayonda renderlaydi va imo-ishoralarni (tegish, surish, aylantirish) SwiftUI runtime-ga qaytaradi. Foydalanuvchi simulyatorni ishga tushirmasdan tugmalarni bosishi, matn maydonlarini to'ldirishi va navigatsiyani sinab ko'rishi mumkin.

SwiftUI Canvas-dagi imo-ishoralarni haqiqiy qurilmadagi kabi bir xil hodisa tizimi orqali qayta ishlaydi. Samaradorlik farqi: Canvas Metal orqali dasturiy renderlashdan foydalanadi, simulyator esa host grafikasidan. Bu murakkab animatsiyalar Canvas-da sekinroq ishlashi yoki vizual farq qilishi mumkinligini anglatadi.

Canvas yangilanish jarayoni

Canvas yangilanishi uch bosqichda sodir bo'ladi. Avval Xcode fayl o'zgarishini aniqlaydi va faqat o'zgartirilgan PreviewProvider-ni qo'shimcha ravishda kompilyatsiya qiladi. Keyin yangi binar modul PreviewProviderExtension jarayoniga yuklanadi. Nihoyat, SwiftUI View-ni qayta yaratadi va Metal orqali renderlaydi. Butun tsikl View murakkabligiga qarab 0.5–2 soniya davom etadi.

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

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

Interaktivlik: Live Preview ishga tushirilganda Canvas-dagi tugma haqiqiy tugma kabi ishlaydi — har bosishda hisoblagich ortadi, bosish animatsiyasi ko'rsatiladi. Bu simulyatorsiz tugma mantiqini sinab ko'rish imkonini beradi.

Canvas-ni sozlash

Asosiy sozlamalar Canvas-ga Editor → Canvas menyusi yoki Canvas asboblar panelidagi tugmalar orqali kirish mumkin. Asosiy variantlarga qurilma, orientatsiya, qorong'u rejim va Dynamic Type masshtabi kiradi. Doimiy sozlamalar uchun koddagi PreviewProvider modifikatorlaridan foydalaning.

Murakkab sozlamalar: Auto Activate Preview — SwiftUI fayli ochilganda Canvas-ni avtomatik yoqish; Live Preview — imo-ishora rejimi; Draw Live Edges — ko'rinish chegaralarini ko'rsatish; Show Preview Sizes — oldindan ko'rish maydoni hajmi. Xcode bu sozlamalarni workspace/loyiha fayllarida ko'chma tarzda saqlaydi.

PreviewProvider orqali sozlash

Dasturiy sozlash Canvas ustidan aniqroq nazorat beradi. previews-da qo'llanilgan modifikatorlar asboblar paneli sozlamalarini bekor qiladi va kodda saqlanadi — ularni git orqali butun jamoa a'zolari ko'radi.

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 bilan qurilmaning to'liq ekranini, .sizeThatFits esa tarkibga moslashtirilgan ixcham oldindan ko'rishni ko'rsatadi. Vidjetlar va kichik komponentlar uchun .sizeThatFits dan foydalaning — bu muharrirda joyni tejaydi.

Canvas bilan ishlash namunalari

1-namuna: moslashuvchanlikni tekshirish. Bir nechta qurilma va rang sxemalari bilan ForEach dan foydalanib, interfeys barcha ekranlarda bir xil yaxshi ko'rinishiga ishonch hosil qiling. Canvas barcha oldindan ko'rishlarni bir vaqtda yangilaydi va simulyatorni ishga tushirishdan oldin layout muammolarini ko'rishga imkon beradi.

2-namuna: ma'lumotlar bilan oldindan ko'rish. Dinamik tarkibni ko'rsatadigan View-lar (ro'yxatlar, profillar, kartalar) uchun previews-da turli ma'lumotlar bilan bir nechta nusxalar yarating. Bu simulyatorda ekranlar o'rtasida almashish va ma'lumot kiritishdan tezroq.

Turli holatlar bilan oldindan ko'rish

Oldindan ko'rishlar guruhi Group yoki ForEach orqali komponentning barcha holatlarini bitta panelda ko'rsatishga imkon beradi. Ro'yxat uchun bu ayniqsa qulay: bo'sh ro'yxat, yuklash, xato va to'ldirilgan ro'yxat bir vaqtda ko'rinadi.

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 — taqqoslash

Canvas va Simulator bir-birini to'ldiradi, almashtirmaydi. Canvas interfeysni yaratishda tezkor iteratsiya uchun idealdir: darhol qayta aloqa bilan kodni tahrirlash. Simulator yakuniy tekshirish uchun zarur: real samaradorlik, maxsus imo-ishoralar, tizim ogohlantirishlari va apparat funktsiyalari (kamera, sensorlar) bilan integratsiya.

WWDC 2024 ma'lumotlariga ko'ra, Apple Canvas-ni dastlabki bosqichlarda ishlab chiqaruvchi vositasi, Simulator-ni esa integratsiya testi bosqichi uchun joylashtiradi. UI rivojlanish vaqtining 60% Canvas-da, 40% esa simulyator yoki qurilmada tekshirish tavsiya etiladi.

Tavsiya: interfeysni Canvas-da yarating, simulyatorda sinab ko'ring. Tugmalar va navigatsiya imo-ishora mantiqi uchun Live Preview dan foydalaning, ammo animatsiyalar, tarmoq so'rovlari va apparat funktsiyalarining yakuniy tekshiruvini simulyator yoki real qurilmada o'tkazing.

Canvas bilan ishlash bo'yicha maslahatlar

1-maslahat: Selectable rejimidan foydalaning. Selectable rejimida (kursor belgisi) oldindan ko'rishdagi istalgan elementni bosib, uning ierarxiyasi, modifikatorlari va ramkasini inspektorda ko'rish mumkin. Bu layout-ni tuzatish uchun foydali: chop etmasdan darhol padding, offset va element hajmini ko'rasiz.

2-maslahat: Embed In Diagram. Canvas elementlarni guruhlashi mumkin: ikki yoki undan ko'p View-ni tanlang, Embed In Diagram tugmasini bosing — Canvas VStack/HStack/ZStack yaratadi va kodni avtomatik qayta yozadi. Bu qo'lda qavslar yozmasdan murakkab ierarxiya yaratishni tezlashtiradi.

3-maslahat: Canvas Preview Cache-ni tozalash. Agar Canvas yangilanishni to'xtatsa, Product → Preview Cache-ni tozalang. Xcode keshlangan PreviewProvider binar fayllarini o'chirib, ularni noldan quradi. Bu Canvas muammolarining 90% ini hal qiladi.

Canvas tezligini optimallashtirish

Sekin Canvas odatda haddan tashqari ko'p oldindan ko'rishlar sabab bo'ladi. Murakkab View-lar uchun 6–8 ta o'rniga faqat bitta oldindan ko'rishdan foydalaning. Imo-ishoralari bo'lmagan View-lar uchun Live Preview-ni o'chiring — statik rejim tezroq renderlanadi. PreviewProvider haqiqiy tarmoq so'rovlari emas, balki mock ma'lumotlardan foydalanishiga ishonch hosil qiling.

// Tezkor tuzatish: minimal oldindan ko'rish
struct ComplexView_Previews: PreviewProvider {
    static var previews: some View {
        ComplexView()
            .previewLayout(.sizeThatFits) // ixcham rejim
    }
}

previewLayout(.sizeThatFits) — Canvas-ning eng tez rejimi, chunki qurilma ramkasiz faqat View tarkibi renderlanadi. Kundalik ish uchun foydalaning, .device rejimini faqat yakuniy tekshirish uchun yoqing.