Canvas di Xcode — apa itu, editor SwiftUI dan bekerja dengan pratinjau

Apa itu Canvas di Xcode?

Canvas — editor pratinjau bawaan Xcode, pertama kali diperkenalkan di Xcode 11 bersama SwiftUI. Letaknya di panel kanan editor di samping kode dan menampilkan pratinjau langsung SwiftUI View saat ini. Canvas bekerja secara real-time: setiap perubahan pada kode segera tercermin dalam pratinjau tanpa kompilasi ulang manual.

Secara arsitektur, Canvas adalah proses terpisah (Preview Provider Extension) yang dijalankan Xcode saat membuka Canvas. Proses ini memuat PreviewProvider yang telah dikompilasi, merender hasilnya melalui Metal, dan menampilkannya di panel editor. Jika PreviewProvider tidak diimplementasikan, Canvas menampilkan pesan “Preview paused — No preview provider found”.

Antarmuka Canvas

Antarmuka Canvas mencakup panel alat dengan pemilihan perangkat, orientasi, skema warna, dan skala. Tombol Live Preview, Selectable, dan Embed In Diagram mengganti mode interaksi. Canvas mendukung split-view: beberapa Canvas dapat dibuka untuk file berbeda di ruang kerja yang sama.

Bagaimana Canvas interaktif bekerja

Live Preview — kemampuan utama Canvas yang membuat pratinjau menjadi interaktif. Dalam mode ini, Canvas merender View di proses terpisah dan mengirimkan gestur (sentuhan, geser, gulir) kembali ke runtime SwiftUI. Pengguna dapat menekan tombol, mengisi bidang teks, dan menguji navigasi tanpa menjalankan simulator.

SwiftUI memproses gestur di Canvas melalui sistem peristiwa yang sama seperti pada perangkat nyata. Perbedaan kinerja: Canvas menggunakan rendering perangkat lunak melalui Metal, sedangkan simulator menggunakan grafis host. Ini berarti animasi kompleks di Canvas mungkin berjalan lebih lambat atau berbeda secara visual.

Proses pembaruan Canvas

Pembaruan Canvas terjadi dalam tiga tahap. Pertama, Xcode mendeteksi perubahan file dan mengompilasi secara inkremental hanya PreviewProvider yang diubah. Kemudian modul biner baru dimuat ke proses PreviewProviderExtension. Terakhir, SwiftUI membuat ulang View dan merendernya melalui Metal. Seluruh siklus memakan waktu 0.5–2 detik tergantung pada kompleksitas View.

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

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

Interaktivitas: saat Live Preview dijalankan, tombol di Canvas berfungsi seperti tombol sungguhan — penghitung bertambah setiap kali ditekan, animasi tekan ditampilkan. Ini memungkinkan pengujian logika tombol tanpa simulator.

Konfigurasi Canvas

Pengaturan dasar Canvas dapat diakses melalui menu Editor → Canvas atau melalui tombol pada panel alat Canvas. Opsi utama meliputi pemilihan perangkat, orientasi, tema gelap, dan skala Dynamic Type. Untuk pengaturan permanen, gunakan pengubah PreviewProvider dalam kode.

Pengaturan lanjutan meliputi: Auto Activate Preview — mengaktifkan Canvas secara otomatis saat membuka file SwiftUI; Live Preview — mode dengan gestur; Draw Live Edges — menampilkan batas tampilan; Show Preview Sizes — ukuran area pratinjau. Xcode menyimpan pengaturan ini secara portabel di file workspace/proyek.

Konfigurasi melalui PreviewProvider

Konfigurasi programatik memberikan kontrol yang lebih tepat atas Canvas. Pengubah yang diterapkan di previews menimpa pengaturan panel alat dan disimpan dalam kode — semua anggota tim melihatnya melalui 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 dengan .device menampilkan layar penuh perangkat, dan .sizeThatFits — pratinjau kompak dengan ukuran yang disesuaikan dengan konten. Untuk widget dan komponen kecil, gunakan .sizeThatFits — ini menghemat ruang di editor.

Contoh bekerja dengan Canvas

Contoh 1: memeriksa adaptivitas. Gunakan ForEach dengan beberapa perangkat dan skema warna untuk memastikan antarmuka terlihat sama baiknya di semua layar. Canvas memperbarui semua pratinjau secara bersamaan, memungkinkan Anda melihat masalah tata letak sebelum menjalankan simulator.

Contoh 2: pratinjau dengan data. Untuk View yang menampilkan konten dinamis (daftar, profil, kartu), buat beberapa instance dengan data berbeda di previews. Ini lebih cepat daripada beralih antar layar di simulator dan memasukkan data.

Pratinjau dengan berbagai status

Grup pratinjau melalui Group atau ForEach memungkinkan menampilkan semua status komponen di satu panel. Untuk daftar, ini sangat nyaman: daftar kosong, memuat, kesalahan, dan daftar terisi terlihat bersamaan.

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

Canvas dan Simulator saling melengkapi, bukan menggantikan. Canvas ideal untuk iterasi cepat saat mendesain antarmuka: mengedit kode dengan umpan balik segera. Simulator diperlukan untuk pemeriksaan akhir: kinerja nyata, gestur kustom, peringatan sistem, dan integrasi dengan fungsi perangkat keras (kamera, sensor).

Menurut WWDC 2024, Apple memposisikan Canvas sebagai alat untuk pengembang di tahap awal, dan Simulator untuk tahap pengujian integrasi. 60% waktu pengembangan UI direkomendasikan di Canvas, 40% — diperiksa di simulator atau perangkat.

Rekomendasi: desain di Canvas, uji di simulator. Gunakan Live Preview untuk logika gestur tombol dan navigasi, tetapi lakukan pemeriksaan akhir animasi, permintaan jaringan, dan fungsi perangkat keras di simulator atau perangkat nyata.

Tips bekerja dengan Canvas

Tip 1: gunakan mode Selectable. Dalam mode Selectable (ikon kursor), Anda dapat mengklik elemen mana pun di pratinjau dan melihat hierarki, pengubah, dan bingkainya di inspector. Ini berguna untuk debugging tata letak: Anda langsung melihat padding, offset, dan ukuran elemen tanpa mencetak.

Tip 2: Embed In Diagram. Canvas dapat mengelompokkan elemen: pilih dua atau lebih View, klik Embed In Diagram — Canvas akan membuat VStack/HStack/ZStack dan menulis ulang kode secara otomatis. Ini mempercepat pembuatan hierarki kompleks tanpa mengetik tanda kurung secara manual.

Tip 3: membersihkan Cache Pratinjau Canvas. Jika Canvas berhenti diperbarui, bersihkan Product → Preview Cache. Xcode akan menghapus file biner PreviewProvider yang di-cache dan membangunnya kembali dari awal. Ini menyelesaikan 90% masalah dengan Canvas yang macet.

Optimalisasi kecepatan Canvas

Canvas lambat biasanya disebabkan oleh jumlah pratinjau yang berlebihan. Untuk View yang kompleks, gunakan hanya satu pratinjau, bukan grup 6–8. Matikan Live Preview untuk View tanpa gestur — mode statis merender lebih cepat. Pastikan PreviewProvider menggunakan data tiruan, bukan permintaan jaringan nyata.

// Debug cepat: pratinjau minimal
struct ComplexView_Previews: PreviewProvider {
    static var previews: some View {
        ComplexView()
            .previewLayout(.sizeThatFits) // mode ringkas
    }
}

previewLayout(.sizeThatFits) — mode Canvas tercepat, karena hanya konten View yang dirender tanpa bingkai perangkat. Gunakan untuk pekerjaan sehari-hari, aktifkan .device hanya untuk pemeriksaan akhir.