Published on

Canvas preview va simulator

Authors

Siz viewlarni (views) qurish davomida ularni tekshirish uchun canvas preview'dan foydalanib keldingiz. Ammo u Xcode oynasining o'ng tomoniga shunchaki nazar tashlashdan ancha ko'proq imkoniyatga ega. Ushbu darsda canvas preview va simulator'dan qanday samarali foydalanishni hamda ular kutilmaganda hamkorlik qilishni to'xtatganda nima qilish kerakligini ko'rib chiqamiz.

Canvas preview va simulator bir xil asosiy muammoni hal qiladi β€” "bu qanday ko'rinishga ega?" β€” ammo turli xil kontekstlarda. Preview tez, yengil va tartib (layout) hamda uslublarni (styling) tezkor o'zgartirish uchun juda mos keladi. Simulator-ni ishga tushirish ko'proq vaqt oladi, ammo u ilovaning haqiqiy kodini ishga tushiradi va tugmalarni bosish, navigatsiya hamda animatsiyalar kabi haqiqiy xatti-harakatlarni sinash uchun qulayroqdir.

Ushbu darsning oxiriga kelib siz o'z viewlaringizni turli xil qurilma o'lchamlari va rang sxemalarida preview qilishni, ilovangizni simulator-da ishga tushirishni va preview ishdan chiqqanda (bu baribir kun kelib sodir bo'ladi) nima qilish kerakligini bilib olasiz.

Canvas preview bilan ishlash

Swift
ContentView va preview makrosi
// Sizning ContentView kodingiz struct ContentView: View { var body: some View { Text("Hello, Preview!") } } // Ushbu makros faylning pastki qismida jonli canvas preview'ni faollashtiradi // U Xcode tomonidan avtomatik yaratiladi β€” odatda uni tahrirlash shart emas #Preview { ContentView() }
ElementVazifasi (Nima qiladi)
#Preview { }Xcode-ga uning ichidagi ko'rinishni canvas panelida render qilishni aytadigan Swift makrosi. Yangi SwiftUI fayllariga avtomatik ravishda qo'shiladi.
Resume tugmasiPreview to'xtatilgan (paused) holatda paydo bo'ladi. Oxirgi o'zgarishlar bilan preview'ni yangilash uchun uni bosing (yoki Option + Command + P tugmalarini bosing).
Live Preview rejimiKo'rinishingizning interaktiv versiyasini ishga tushiradi β€” simulator'ni ochmasdan turib tugmalarni bosishingiz, ro'yxatlarni aylantirishingiz va animatsiyalarni faollashtirishingiz mumkin.
Static previewStandart (sukut bo'yicha) rejim β€” ko'rinishingizning lahzali suratini (snapshot) render qiladi. Tezroq yuklanadi va tartibni tekshirish uchun idealdir.

⚠️ Preview ishdan chiqqanda:
Canvas panelidagi qizil xatolik ekrani odatda kodingizning qayeridadir kompilyatsiya xatosi borligini anglatadi. Xatolik xabarini tekshiring β€” u ko'pincha muammoni aniq ko'rsatib beradi. Agar preview qotib qolsa yoki yangilanmasa, uni majburan qayta ishga tushirish uchun Option + Command + P tugmalarini bosing. Agar baribir ishlamasa, faylni yopib qaytadan ochib ko'ring.

Qo'shimcha preview konfiguratsiyalari

Bir nechta previewBir vaqtning o'zida bir xil ko'rinishni turli xil qurilmalar yoki rang sxemalarida ko'rish.
// Bir vaqtning o'zida yorug' va qorong'u rejimda preview qilish
#Preview("Light Mode") {
    ContentView()
        .preferredColorScheme(.light)
}

#Preview("Dark Mode") {
    ContentView()
        .preferredColorScheme(.dark)
}

Bitta faylda bir nechta #Preview bloklariga ega bo'lishingiz mumkin. Ularning har biri canvas panelida o'zining alohida preview'si sifatida render qilinadi. Bu yorug' va qorong'u rejimni bir vaqtda tekshirish yoki tartibingiz turli qurilma o'lchamlarida qanday ko'rinishini ko'rish uchun juda qulaydir.

SimulatorTo'liq ilovangizni virtual iOS qurilmasida ishga tushirish.
// Hech qanday kod o'zgartirish shart emas β€” shunchaki Xcode-dagi Run (β–Ά) tugmasini bosing
// yoki klaviatura yorlig'idan foydalaning: Command + R
// Xcode ilovani quradi va tanlangan simulator qurilmasida ishga tushiradi

Qaysi simulator iPhone yoki iPad-da ishga tushirishni tanlash uchun Xcode tepasidagi qurilma selektori dropdown menyusidan foydalaning. Simulator canvas preview'ga qaraganda sekinroq ishga tushadi, ammo u sizning to'liq ilovangizni β€” navigatsiya, holat o'zgarishlari va animatsiyalari bilan birga ishga tushiradi. Undan shunchaki statik tartiblarni emas, balki haqiqiy o'zaro tasirlarni sinash uchun foydalaning.

Istalgan ko'rinishni preview qilishTo'liq ilovani ishga tushirmasdan, kichik sub-view'ni alohida preview qiling.
// Faqat ContentView-ni emas, istalgan ko'rinishni preview qilishingiz mumkin
struct ProfileCard: View {
    var body: some View {
        Text("Profil tarkibi shu yerda")
    }
}

// Ushbu maxsus komponentni to'g'ridan-to'g'ri preview qilish
#Preview {
    ProfileCard()
}

Har bir ko'rinish (view) fayli o'zining alohida #Preview blokiga ega bo'lishi mumkin. Bu SwiftUI-ning eng yaxshi ishlab chiqish xususiyatlaridan biridir β€” siz butun ilovani qurmasdan va ishga tushirmasdan turib, kichik komponent ustida ishlashingiz mumkin. Tezkor teskari aloqa tezroq o'rganishni anglatadi.

πŸ’‘ Odatni erta shakllantiring:
Kod yozish davomida canvas'ni doimo ochiq qoldirish odatini shakllantiring. Lahzali vizual teskari aloqa zanjiri β€” modifikatorni yozish va darhol natijani ko'rish β€” SwiftUI-ning eng katta afzalliklaridan biridir. Canvas'ni yopib, har safar simulator'ni ishga tushirish sizni sezilarli darajada sekinlashtiradi.

Preview ishlamay qolsa: Canvasda qizil xato ekrani odatda kodingizda kompilyatsiya xatosi borligini anglatadi. Xato xabarini tekshiring β€” u ko'pincha to'g'ridan muammoga ishora qiladi. Preview yangilanmayapti yoki qotiΠ± qolgan bo'lsa, Option + Command + P bosib majburan qayta yuklab ko'ring. Hali ham ishlamasa β€” faylni yopib qayta oching.

Tezkor ma'lumotnoma

AmalQanday bajariladi
Canvas panelini ochishEditor > Canvas yoki Option + Command + Return
To'xtatilgan preview'ni yangilashResume tugmasini bosish yoki Option + Command + P
Simulator-da ishga tushirishβ–Ά tugmasini bosish yoki Command + R
Qorong'u rejimda preview qilish#Preview { } ichidagi ko'rinishga .preferredColorScheme(.dark) qo'llash
Maxsus komponentni preview qilishIstalgan SwiftUI faylining pastki qismiga #Preview { O'zKo'rinishingiz() } qo'shish
Simulator qurilmasini almashtirishXcode oynasining tepasidagi qurilma tanlash dropdown menyusidan foydalanish

Sun'iy intellektdan chuqurroq o'rganish uchun foydalanish

1. Tushunchalarni chuqurlashtirish (ai'dan repetitor sifatida foydalaning):

  • "Xcode-da SwiftUI canvas preview ishdan chiqishi yoki yangilanmasligining eng keng tarqalgan sabablari nima? Menga eng ko'p uchraydiganidan kam uchraydiganigacha bo'lgan tartiblangan ro'yxatni bering va har biri uchun tashxis qo'yish hamda tuzatish yo'lini tushuntiring."
  • "Qachon canvas preview'dan va qachon simulator'dan foydalanishim kerak? Preview'da sinab ko'rib bo'lmaydigan, faqat simulator'da sinash mumkin bo'lgan aniq narsalar bormi? Har biriga aniq misollar keltiring."

2. Amaliy ko'rinish yaratish (xcode-da sinab ko'rish uchun):

  • "Menga ostida uchta #Preview bloki bo'lgan SwiftUI Viewni yozib bering: biri yorug' rejimda, biri qorong'u rejimda va yana biri .dynamicTypeSize modifikatori yordamida kattalashtirilgan matn o'lchamida bo'lsin. Har bir #Preview tepasida u nimani sinovdan o'tkazayotganini va nima uchun ushbu uchala holatni tekshirish muhimligini yangi boshlovchi uchun tushunarli qilib yozing."

🎯 Topshiriq: uchta konfiguratsiyada preview qilish

Avvalgi darsda qurgan istalgan ko'rinishingizni oling va uning ostiga uchta #Preview blokini qo'shing: biri default (standart) holatda, biri .preferredColorScheme(.dark) bilan va yana biri boshqa qurilma o'lchamida. Uchalala preview'ni ham oching va tartibingiz barchasida to'g'ri ko'rinayotganini tekshiring. Agar qorong'u rejim biror narsani buzsa, nima uchun va qayeri buzilganini qayd eting.

Swift
Topshiriq yechimi
import SwiftUI struct ContentView: View { var body: some View { Text("Salom, Dunyo!") .font(.title) .padding() } } // 1. Standart preview #Preview { ContentView() } // 2. Qorong'u rejim preview #Preview("Dark Mode") { ContentView() .preferredColorScheme(.dark) } // 3. Nomlangan maxsus preview #Preview("Mening ko'rinishim") { ContentView() }

πŸ’‘ Maslahat:
Siz har bir preview'ga nom berish uchun satr uzatishingiz mumkin: #Preview("Dark Mode") { ... } β€” bu bir nechta preview ochiq bo'lganda ularni canvas panelida osongina aniqlash imkonini beradi.

Buy mea coffee