Canvas sa Xcode — ano ito, SwiftUI editor at paggawa gamit ang preview

Ano ang Canvas sa Xcode?

Canvas — ang built-in na preview editor ng Xcode, unang ipinakilala sa Xcode 11 kasama ng SwiftUI. Ito ay matatagpuan sa kanang panel ng editor sa tabi ng code at nagpapakita ng live na preview ng kasalukuyang SwiftUI View. Gumagana ang Canvas sa real-time: bawat pagbabago sa code ay agad na naipapakita sa preview nang walang manu-manong recompilation.

Sa arkitektura, ang Canvas ay isang hiwalay na proseso (Preview Provider Extension) na inilulunsad ng Xcode kapag binuksan ang Canvas. Nilo-load ng proseso ang naka-compile na PreviewProvider, nire-render ang resulta sa pamamagitan ng Metal, at ipinapakita ito sa panel ng editor. Kung hindi na-implement ang PreviewProvider, magpapakita ang Canvas ng mensaheng “Preview paused — No preview provider found”.

Interface ng Canvas

Ang interface ng Canvas ay may kasamang toolbar na may pagpili ng device, oryentasyon, scheme ng kulay, at scale. Ang mga button na Live Preview, Selectable, at Embed In Diagram ay nagpapalipat-lipat ng mga mode ng interaksyon. Sinusuportahan ng Canvas ang split-view: maraming Canvas ang maaaring buksan para sa iba't ibang file sa iisang workspace.

Paano gumagana ang interactive na Canvas

Live Preview — ang pangunahing kakayahan ng Canvas na ginagawang interactive ang preview. Sa mode na ito, nire-render ng Canvas ang View sa isang hiwalay na proseso at ibinabalik ang mga galaw (tap, swipe, scroll) sa SwiftUI runtime. Maaaring pindutin ng user ang mga button, punan ang mga text field, at subukan ang navigation nang hindi inilulunsad ang simulator.

SwiftUI ay nagpoproseso ng mga galaw sa Canvas sa pamamagitan ng parehong sistema ng kaganapan tulad ng sa isang tunay na device. Ang pagkakaiba sa performance: gumagamit ang Canvas ng software rendering sa pamamagitan ng Metal, habang ang simulator ay gumagamit ng host graphics. Nangangahulugan ito na ang mga kumplikadong animation sa Canvas ay maaaring gumana nang mas mabagal o magkaiba nang biswal.

Proseso ng pag-update ng Canvas

Ang pag-update ng Canvas ay nangyayari sa tatlong yugto. Una, nakikita ng Xcode ang pagbabago ng file at ini-incremental na ini-compile lamang ang binagong PreviewProvider. Pagkatapos, ang bagong binary module ay nilo-load sa proseso ng PreviewProviderExtension. Sa wakas, muling ginagawa ng SwiftUI ang View at nire-render ito sa pamamagitan ng Metal. Ang buong cycle ay tumatagal ng 0.5–2 segundo depende sa pagiging kumplikado ng View.

struct TappableButton: View {
    @State private var count = 0
    
    var body: some View {
        Button("Na-tap ng \(count) beses") {
            count += 1
        }
        .buttonStyle(.borderedProminent)
    }
}

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

Interaktibidad: kapag pinatakbo ang Live Preview, gumagana ang button sa Canvas tulad ng isang tunay — tumataas ang counter sa bawat pagpindot, ipinapakita ang animation ng pagpindot. Ito ay nagbibigay-daan sa pagsubok ng lohika ng button nang walang simulator.

Pag-configure ng Canvas

Mga pangunahing setting ng Canvas ay maa-access sa pamamagitan ng menu na Editor → Canvas o sa pamamagitan ng mga button sa toolbar ng Canvas. Ang mga pangunahing opsyon ay may kasamang pagpili ng device, oryentasyon, dark mode, at scale ng Dynamic Type. Para sa permanenteng setting, gamitin ang mga modifier ng PreviewProvider sa code.

Mga advanced na setting ay may kasamang: Auto Activate Preview — awtomatikong pag-activate ng Canvas kapag nagbukas ng SwiftUI file; Live Preview — mode na may galaw; Draw Live Edges — pagpapakita ng mga hangganan ng view; Show Preview Sizes — laki ng preview area. Ini-save ng Xcode ang mga setting na ito nang portable sa mga file ng workspace/proyekto.

Pag-configure sa pamamagitan ng PreviewProvider

Ang programmatic na configuration ay nagbibigay ng mas tumpak na kontrol sa Canvas. Ang mga modifier na inilapat sa previews ay nag-o-override sa mga setting ng toolbar at nai-save sa code — lahat ng miyembro ng team ay nakakakita nito sa pamamagitan ng 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 na may .device ay nagpapakita ng buong screen ng device, at .sizeThatFits — isang compact na preview na may sukat na iniakma sa nilalaman. Para sa mga widget at maliliit na bahagi, gamitin ang .sizeThatFits — nakakatipid ito ng espasyo sa editor.

Mga halimbawa ng paggawa gamit ang Canvas

Halimbawa 1: pagsusuri ng adaptivity. Gamitin ang ForExecute kasama ang maraming device at scheme ng kulay upang matiyak na ang interface ay mukhang parehong maganda sa lahat ng screen. Ina-update ng Canvas ang lahat ng preview nang sabay-sabay, na nagbibigay-daan sa iyong mapansin ang mga problema sa layout bago patakbuhin ang simulator.

Halimbawa 2: preview na may data. Para sa View na nagpapakita ng dynamic na nilalaman (mga listahan, profile, card), gumawa ng maraming instance na may iba't ibang data sa previews. Ito ay mas mabilis kaysa sa paglipat sa pagitan ng mga screen sa simulator at pagpasok ng data.

Preview na may iba't ibang estado

Grupo ng mga preview sa pamamagitan ng Group o ForExecute ay nagbibigay-daan sa pagpapakita ng lahat ng estado ng isang bahagi sa isang panel. Para sa isang listahan, ito ay lalong maginhawa: walang laman na listahan, naglo-load, error, at napunong listahan ay makikita nang sabay-sabay.

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

Canvas at Simulator ay nagpupuno sa isa't isa, hindi pumapalit. Ang Canvas ay perpekto para sa mabilis na pag-ulit kapag nagdidisenyo ng interface: pag-edit ng code na may agarang feedback. Ang Simulator ay kinakailangan para sa huling pagsusuri: tunay na performance, custom na galaw, mga alert ng system, at pagsasama sa mga function ng hardware (camera, sensor).

Ayon sa WWDC 2024, itinuturing ng Apple ang Canvas bilang tool para sa developer sa mga unang yugto, at ang Simulator para sa yugto ng integration testing. 60% ng oras ng pag-develop ng UI ay inirerekomenda sa Canvas, 40% — suriin sa simulator o device.

Rekomendasyon: mag-disenyo sa Canvas, mag-test sa simulator. Gamitin ang Live Preview para sa lohika ng galaw ng button at navigation, ngunit isagawa ang huling pagsusuri ng mga animation, network request, at hardware function sa simulator o tunay na device.

Mga tip sa paggawa gamit ang Canvas

Tip 1: gamitin ang Selectable mode. Sa Selectable mode (icon ng cursor), maaari mong i-click ang anumang elemento sa preview at makita ang hierarchy, modifiers, at frame nito sa inspector. Ito ay kapaki-pakinabang para sa pag-debug ng layout: agad mong makikita ang padding, offset, at laki ng elemento nang walang pag-print.

Tip 2: Embed In Diagram. Maaaring mag-grupo ang Canvas ng mga elemento: pumili ng dalawa o higit pang View, i-click ang Embed In Diagram — gagawa ang Canvas ng VStack/HStack/ZStack at awtomatikong muling isusulat ang code. Pinapabilis nito ang paggawa ng kumplikadong hierarchy nang walang manu-manong pag-type ng mga bracket.

Tip 3: pag-clear ng Canvas Preview Cache. Kung huminto sa pag-update ang Canvas, i-clear ang Product → Preview Cache. Buburahin ng Xcode ang mga naka-cache na binary file ng PreviewProvider at itatayo muli ang mga ito mula sa simula. Nalulutas nito ang 90% ng mga problema sa naka-stuck na Canvas.

Pag-optimize ng bilis ng Canvas

Mabagal na Canvas ay karaniwang sanhi ng sobrang dami ng mga preview. Para sa kumplikadong View, gumamit lamang ng isang preview, hindi isang grupo ng 6–8. I-off ang Live Preview para sa View na walang galaw — mas mabilis mag-render ang static mode. Tiyaking gumagamit ang PreviewProvider ng mga mock, hindi tunay na network request.

// Mabilis na debug: minimal na preview
struct ComplexView_Previews: PreviewProvider {
    static var previews: some View {
        ComplexView()
            .previewLayout(.sizeThatFits) // compact mode
    }
}

previewLayout(.sizeThatFits) — ang pinakamabilis na mode ng Canvas, dahil ang nilalaman lamang ng View ang nare-render nang walang frame ng device. Gamitin ito para sa pang-araw-araw na gawain, i-activate ang .device para lamang sa huling pagsusuri.