Canvas en Xcode — qué es, editor SwiftUI y trabajo con previsualizaciones

¿Qué es Canvas en Xcode?

Canvas es un editor de previsualización integrado en Xcode, presentado por primera vez en Xcode 11 junto con SwiftUI. Está ubicado en el panel derecho del editor junto al código y muestra una vista previa en vivo de la SwiftUI View actual. Canvas funciona en tiempo real: cada cambio en el código se refleja instantáneamente en la vista previa sin necesidad de recompilación manual.

Arquitectónicamente, Canvas es un proceso separado (Preview Provider Extension) que Xcode inicia al abrir Canvas. El proceso carga el PreviewProvider compilado, renderiza el resultado a través de Metal y lo muestra en el panel del editor. Si PreviewProvider no está implementado, Canvas muestra un marcador “Preview paused — No preview provider found”.

Interfaz de Canvas

La interfaz de Canvas incluye una barra de herramientas con selección de dispositivo, orientación, esquema de colores y escala. Los botones Live Preview, Selectable y Embed In Diagram cambian los modos de interacción. Canvas admite vista dividida: puede abrir varios Canvas para diferentes archivos en el mismo espacio de trabajo.

Cómo funciona Canvas interactivo

Live Preview es la característica clave de Canvas que hace que las vistas previas sean interactivas. En este modo, Canvas renderiza la View en un proceso separado y pasa los gestos (toque, deslizamiento, desplazamiento) al runtime de SwiftUI. El usuario puede presionar botones, llenar campos de texto y probar la navegación sin iniciar el simulador.

SwiftUI procesa los gestos en Canvas a través del mismo sistema de eventos que en un dispositivo real. La diferencia está en el rendimiento: Canvas utiliza renderizado por software a través de Metal, mientras que el simulador usa gráficos del host. Esto significa que las animaciones complejas en Canvas pueden funcionar más lento o verse diferentes visualmente.

Proceso de actualización de Canvas

La actualización de Canvas ocurre en tres etapas. Primero, Xcode detecta el cambio de archivo y compila incrementalmente solo el PreviewProvider modificado. Luego, el nuevo módulo binario se carga en el proceso PreviewProviderExtension. Finalmente, SwiftUI recrea la View y la renderiza a través de Metal. Todo el ciclo toma de 0,5 a 2 segundos dependiendo de la complejidad de la 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()
    }
}

Interactividad: cuando Live Preview está activo, el botón en Canvas funciona como uno real — el contador se incrementa con cada toque y se muestra la animación de presión. Esto permite probar la lógica de los botones sin el simulador.

Configuración de Canvas

Configuraciones básicas de Canvas están disponibles a través del menú Editor → Canvas o mediante los botones de la barra de herramientas de Canvas. Las opciones principales incluyen selección de dispositivo, orientación, tema oscuro y escala Dynamic Type. Para configuraciones persistentes, use modificadores de PreviewProvider en el código.

Configuraciones avanzadas incluyen: Auto Activate Preview — activación automática de Canvas al abrir un archivo SwiftUI; Live Preview — modo con gestos; Draw Live Edges — mostrar bordes de la vista; Show Preview Sizes — tamaño del área de vista previa. Xcode guarda estas configuraciones de forma portátil en archivos del workspace/proyecto.

Configuración mediante PreviewProvider

Configuración programática brinda un control más preciso sobre Canvas. Los modificadores aplicados en las vistas previas anulan las configuraciones de la barra de herramientas y se guardan en el código — todos los miembros del equipo los ven a través de 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 con .device muestra la pantalla completa del dispositivo, mientras que .sizeThatFits muestra una vista previa compacta ajustada al contenido. Para widgets y componentes pequeños, use .sizeThatFits — ahorra espacio en el editor.

Ejemplos de trabajo con Canvas

Ejemplo 1: prueba de adaptabilidad. Use ForEach con múltiples dispositivos y esquemas de colores para asegurarse de que la interfaz se vea bien en todas las pantallas. Canvas actualiza todas las vistas previas simultáneamente, lo que permite detectar problemas de diseño antes de iniciar el simulador.

Ejemplo 2: vista previa con datos. Para Views que muestran contenido dinámico (listas, perfiles, tarjetas), cree varias instancias con diferentes datos en las vistas previas. Esto es más rápido que cambiar entre pantallas en el simulador e ingresar datos.

Vista previa con diferentes estados

Grupo de vistas previas mediante Group o ForEach permite mostrar todos los estados del componente en un solo panel. Para listas esto es especialmente conveniente: lista vacía, carga, error y lista completa son visibles simultáneamente.

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 — comparación

Canvas y el Simulador se complementan, no se reemplazan. Canvas es ideal para iteraciones rápidas durante el maquetado: editar código con retroalimentación inmediata. El Simulador es necesario para la verificación final: rendimiento real, gestos personalizados, alertas del sistema e integración con funciones de hardware (cámara, sensores).

Según WWDC 2024, Apple posiciona Canvas como una herramienta para las primeras etapas de desarrollo, y el Simulador para pruebas de integración. Se recomienda dedicar el 60% del tiempo de desarrollo de UI en Canvas y el 40% — en pruebas en el simulador o dispositivo.

Recomendación: diseñe en Canvas, pruebe en el simulador. Use Live Preview para la lógica de gestos de botones y navegación, pero las pruebas finales de animaciones, solicitudes de red y funciones de hardware deben hacerse en el simulador o en un dispositivo real.

Consejos para trabajar con Canvas

Consejo 1: use el modo seleccionable. En el modo seleccionable (icono de cursor), puede hacer clic en cualquier elemento de la vista previa y ver su jerarquía, modificadores y marco en el inspector. Esto es útil para depurar el diseño: ve instantáneamente el padding, el offset y el tamaño del elemento sin imprimir.

Consejo 2: Embed In Diagram. Canvas puede agrupar elementos: seleccione dos o más Views, haga clic en Embed In Diagram — Canvas creará VStack/HStack/ZStack y reconstruirá el código automáticamente. Esto acelera la creación de jerarquías complejas sin escribir corchetes manualmente.

Consejo 3: limpiar caché de previsualización de Canvas. Si Canvas deja de actualizarse, limpie Product → Preview Cache. Xcode eliminará los binarios cacheados de PreviewProvider y los reconstruirá desde cero. Esto soluciona el 90% de los problemas de congelación de Canvas.

Optimización de la velocidad de Canvas

Canvas lento generalmente es causado por una cantidad excesiva de vistas previas. Para Views complejas, use solo una vista previa en lugar de un grupo de 6 a 8. Desactive Live Preview para Views sin gestos — el modo estático se renderiza más rápido. Asegúrese de que PreviewProvider use simulaciones en lugar de solicitudes de red reales.

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

previewLayout(.sizeThatFits) es el modo más rápido de Canvas porque solo renderiza el contenido de la View sin los bordes del dispositivo. Úselo para el maquetado diario, activando .device solo para las comprobaciones finales.