Canvas no Xcode — o que é, editor SwiftUI e trabalho com pré-visualizações

O que é o Canvas no Xcode?

Canvas é um editor de pré-visualização integrado no Xcode, apresentado pela primeira vez no Xcode 11 juntamente com o SwiftUI. Ele está localizado no painel direito do editor ao lado do código e exibe uma pré-visualização ao vivo da SwiftUI View atual. O Canvas funciona em tempo real: cada alteração no código é refletida instantaneamente na pré-visualização sem recompilação manual.

Arquiteturalmente, o Canvas é um processo separado (Preview Provider Extension) que o Xcode inicia ao abrir o Canvas. O processo carrega o PreviewProvider compilado, renderiza o resultado através do Metal e exibe no painel do editor. Se o PreviewProvider não estiver implementado, o Canvas mostra um placeholder “Preview paused — No preview provider found”.

Interface do Canvas

A interface do Canvas inclui uma barra de ferramentas com seleção de dispositivo, orientação, esquema de cores e escala. Os botões Live Preview, Selectable e Embed In Diagram alternam os modos de interação. O Canvas suporta visualização dividida: você pode abrir vários Canvas para diferentes arquivos no mesmo espaço de trabalho.

Como funciona o Canvas interativo

Live Preview é o recurso principal do Canvas que torna as pré-visualizações interativas. Neste modo, o Canvas renderiza a View em um processo separado e passa os gestos (toque, deslize, rolagem) de volta para o runtime do SwiftUI. O usuário pode pressionar botões, preencher campos de texto e testar a navegação sem iniciar o simulador.

SwiftUI processa os gestos no Canvas através do mesmo sistema de eventos que em um dispositivo real. A diferença está no desempenho: o Canvas usa renderização por software através do Metal, enquanto o simulador usa gráficos do host. Isso significa que animações complexas no Canvas podem funcionar mais lentamente ou parecer diferentes visualmente.

Processo de atualização do Canvas

A atualização do Canvas ocorre em três etapas. Primeiro, o Xcode detecta a alteração no arquivo e compila incrementalmente apenas o PreviewProvider modificado. Em seguida, o novo módulo binário é carregado no processo PreviewProviderExtension. Finalmente, o SwiftUI recria a View e a renderiza através do Metal. Todo o ciclo leva de 0,5 a 2 segundos, dependendo da complexidade da View.

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

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

Interatividade: quando o Live Preview está em execução, o botão no Canvas funciona como um real — o contador aumenta a cada toque e a animação de pressão é exibida. Isso permite testar a lógica dos botões sem o simulador.

Configuração do Canvas

Configurações básicas do Canvas estão disponíveis através do menu Editor → Canvas ou dos botões da barra de ferramentas do Canvas. As principais opções incluem seleção de dispositivo, orientação, tema escuro e escala Dynamic Type. Para configurações persistentes, use modificadores PreviewProvider no código.

Configurações avançadas incluem: Auto Activate Preview — ativação automática do Canvas ao abrir um arquivo SwiftUI; Live Preview — modo com gestos; Draw Live Edges — exibir bordas da view; Show Preview Sizes — tamanho da área de pré-visualização. O Xcode salva essas configurações de forma portátil nos arquivos do workspace/projeto.

Configuração através do PreviewProvider

Configuração programática dá um controle mais preciso sobre o Canvas. Os modificadores aplicados nas pré-visualizações substituem as configurações da barra de ferramentas e são salvos no código — todos os membros da equipe os veem através do 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 com .device exibe a tela completa do dispositivo, enquanto .sizeThatFits mostra uma pré-visualização compacta com tamanho ajustado ao conteúdo. Para widgets e componentes pequenos, use .sizeThatFits — economiza espaço no editor.

Exemplos de trabalho com o Canvas

Exemplo 1: teste de adaptabilidade. Use ForEach com vários dispositivos e esquemas de cores para garantir que a interface fique boa em todas as telas. O Canvas atualiza todas as pré-visualizações simultaneamente, permitindo detectar problemas de layout antes de iniciar o simulador.

Exemplo 2: pré-visualização com dados. Para Views que exibem conteúdo dinâmico (listas, perfis, cartões), crie várias instâncias com dados diferentes nas pré-visualizações. Isso é mais rápido do que alternar entre telas no simulador e inserir dados.

Pré-visualização com diferentes estados

Grupo de pré-visualizações através de Group ou ForEach permite exibir todos os estados do componente em um único painel. Para listas, isso é especialmente conveniente: lista vazia, carregamento, erro e lista preenchida são visíveis simultaneamente.

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 Simulador — comparação

Canvas e Simulador se complementam, em vez de se substituir. O Canvas é ideal para iteração rápida durante a layout: editar código com feedback imediato. O Simulador é necessário para a verificação final: desempenho real, gestos personalizados, alertas do sistema e integração com recursos de hardware (câmera, sensores).

De acordo com a WWDC 2024, a Apple posiciona o Canvas como uma ferramenta para os estágios iniciais de desenvolvimento e o Simulador para testes de integração. Recomenda-se gastar 60% do tempo de desenvolvimento de UI no Canvas e 40% — testando no simulador ou dispositivo.

Recomendação: projete no Canvas, teste no simulador. Use o Live Preview para lógica de gestos de botões e navegação, mas os testes finais de animações, solicitações de rede e funções de hardware devem ser feitos no simulador ou em um dispositivo real.

Dicas para trabalhar com o Canvas

Dica 1: use o modo selecionável. No modo selecionável (ícone de cursor), você pode clicar em qualquer elemento da pré-visualização e ver sua hierarquia, modificadores e moldura no inspetor. Isso é útil para depuração de layout: você vê instantaneamente o padding, offset e tamanho do elemento sem prints.

Dica 2: Embed In Diagram. O Canvas pode agrupar elementos: selecione duas ou mais Views, clique em Embed In Diagram — o Canvas criará VStack/HStack/ZStack e reconstruirá o código automaticamente. Isso acelera a criação de hierarquias complexas sem digitar colchetes manualmente.

Dica 3: limpar cache de pré-visualização do Canvas. Se o Canvas parar de atualizar, limpe Product → Preview Cache. O Xcode excluirá os binários em cache do PreviewProvider e os reconstruirá do zero. Isso resolve 90% dos problemas de congelamento do Canvas.

Otimização da velocidade do Canvas

Canvas lento geralmente é causado por um número excessivo de pré-visualizações. Para Views complexas, use apenas uma pré-visualização em vez de um grupo de 6 a 8. Desligue o Live Preview para Views sem gestos — o modo estático renderiza mais rápido. Certifique-se de que o PreviewProvider use mocks em vez de solicitações de rede reais.

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

previewLayout(.sizeThatFits) é o modo mais rápido do Canvas porque renderiza apenas o conteúdo da View sem as bordas do dispositivo. Use-o para layout diário, ativando .device apenas para verificações finais.