Cómo mostrar la vista previa de SwiftUI en Xcode

Para un iOS developer que ha pasado años luchando con Storyboards, XIBs y el ciclo infinito de “Compilar y Ejecutar” (Build & Run), la llegada de SwiftUI supuso una revolución. Pero la verdadera joya de la corona no es solo la sintaxis declarativa, sino la capacidad de ver los cambios en tiempo real.

Saber mostrar la vista previa de SwiftUI en Xcode no es solo un truco visual; es una metodología de desarrollo que acelera tu flujo de trabajo exponencialmente. Ya no necesitas esperar a que el simulador arranque para ver si ese botón tiene el padding correcto.

En este tutorial vamos a desglosar todo lo que necesitas saber sobre el sistema de Previews en Xcode. Desde la nueva macro #Preview introducida en Swift 5.9, hasta la inyección de datos complejos y el desarrollo multiplataforma para macOS y watchOS. Si quieres llevar tu programación Swift al siguiente nivel, este es tu manual definitivo.

La Evolución: De PreviewProvider a la Macro #Preview

Antes de Xcode 15, los desarrolladores tenían que escribir una estructura auxiliar que conformara el protocolo PreviewProvider. Aunque funcionaba, era código repetitivo (boilerplate) que ensuciaba tus archivos.

Con la llegada de Xcode 15 y Swift 5.9, Apple simplificó esto drásticamente. Ahora utilizamos una Macro. Una macro en Swift transforma el código en tiempo de compilación, permitiendo una sintaxis mucho más limpia.

Para mostrar una vista previa básica, simplemente añades esto al final de tu archivo Swift:

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hola, iOS Developer!")
        }
        .padding()
    }
}

// La nueva forma estándar de mostrar la vista previa en Xcode 15+
#Preview {
    ContentView()
}

Si todavía mantienes código antiguo o necesitas soportar versiones anteriores de Xcode por alguna razón empresarial, es posible que te encuentres con la sintaxis antigua. Es importante reconocerla:

// Forma Legacy (Xcode 14 e inferiores)
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Habilitando el Canvas en Xcode

A veces, abres Xcode y la vista previa no está por ningún lado. Para mostrar la vista previa de SwiftUI en Xcode, necesitas asegurarte de que el “Canvas” está activo.

1. Ve al menú superior: Editor.
2. Selecciona Canvas.
3. Alternativamente, usa el atajo de teclado maestro: Cmd + Option + Enter.

Una vez abierto, verás que el Canvas tiene dos modos principales en la esquina inferior izquierda:

• Live Mode (Play): La vista es interactiva. Puedes hacer scroll, pulsar botones y navegar. Es como tener un mini-simulador.
• Selectable Mode (Arrow): Te permite hacer clic en elementos visuales en el Canvas y Xcode resaltará el código correspondiente en el editor (y viceversa). Ideal para depurar UI compleja.

Personalización de Previews con Traits

La potencia real de la programación Swift moderna radica en probar múltiples escenarios sin ejecutar la app. ¿Cómo se ve tu vista en modo oscuro? ¿Y en horizontal? ¿Y con texto dinámico extra grande?

La macro #Preview acepta parámetros (Traits) que configuran el entorno de la vista previa instantáneamente.

1. Orientación y Nombres

Puedes nombrar tus previews para distinguirlas en el Canvas y forzar la orientación paisaje (landscape).

#Preview("Pantalla Horizontal", traits: .landscapeLeft) {
    ContentView()
}

2. Múltiples Previews en el mismo archivo

Para un iOS developer, es vital ver los casos extremos. Puedes apilar múltiples macros #Preview para ver variaciones simultáneas.

#Preview("Modo Claro") {
    ContentView()
        .preferredColorScheme(.light)
}

#Preview("Modo Oscuro") {
    ContentView()
        .preferredColorScheme(.dark)
}

#Preview("Texto Gigante") {
    ContentView()
        .environment(\.dynamicTypeSize, .accessibility5)
}

Al hacer esto, el Canvas de Xcode dividirá la pantalla y te mostrará las tres versiones a la vez. Esto ahorra horas de pruebas manuales.

Inyección de Datos y Dependencias

El desafío número uno al mostrar vista previa de SwiftUI en Xcode es cuando tu vista depende de datos externos. Si tu vista espera un objeto User o un ViewModel, la preview fallará (Crash) si no se los proporcionas.

En SwiftUI, debemos acostumbrar a crear “Mock Data” (Datos de prueba) estáticos.

Manejo de @Binding

Si tu vista tiene un @Binding var text: String, no puedes pasarle un String literal. Necesitas un binding constante.

struct SearchBar: View {
    @Binding var text: String
    
    var body: some View {
        TextField("Buscar...", text: $text)
            .textFieldStyle(.roundedBorder)
            .padding()
    }
}

#Preview {
    // .constant crea un binding falso inmutable para la preview
    SearchBar(text: .constant("SwiftUI Rocks"))
}

Manejo de @Environment y Modelos

Para vistas complejas que usan SwiftData o CoreData, o un ViewModel complejo, la mejor práctica en programación Swift es crear una extensión de tu modelo con datos de muestra.

class UserViewModel: ObservableObject {
    @Published var name: String
    @Published var isPremium: Bool
    
    init(name: String, isPremium: Bool) {
        self.name = name
        self.isPremium = isPremium
    }
    
    // Propiedad estática para usar en previews
    static let mockUser = UserViewModel(name: "Steve Jobs", isPremium: true)
}

struct ProfileView: View {
    @StateObject var viewModel: UserViewModel
    
    var body: some View {
        Text(viewModel.name)
            .foregroundStyle(viewModel.isPremium ? .yellow : .black)
    }
}

#Preview {
    ProfileView(viewModel: UserViewModel.mockUser)
}

Desarrollo Multiplataforma: iOS, macOS y watchOS

SwiftUI promete “Aprende una vez, aplícalo en todas partes”. Sin embargo, las pantallas son muy diferentes. Xcode permite previsualizar diferentes dispositivos sin cambiar el simulador activo en la barra de herramientas superior.

A pesar de que la macro #Preview intenta inferir el dispositivo, a veces queremos forzar una vista de iPhone SE en un proyecto que apunta a iPhone 15 Pro, o ver la versión de iPad.

Desafortunadamente, con la nueva macro, Apple ha eliminado el modificador .previewDevice("iPhone SE") que usábamos antes en favor de seleccionarlo directamente en el Canvas. En la parte inferior del Canvas, hay un icono de dispositivo donde puedes cambiar el “Run Destination” de la vista previa instantáneamente.

Truco para macOS

Si estás desarrollando para macOS dentro de un paquete multiplataforma, asegúrate de que el target seleccionado en Xcode es “My Mac”. El Canvas de SwiftUI utiliza el motor del target activo. Si tienes seleccionado un Apple Watch, el Canvas intentará renderizar la vista de macOS en un entorno de Watch, lo cual fallará o se verá incorrecto.

Troubleshooting: Cuando la Preview falla

No todo es color de rosa. A menudo verás el temido mensaje: “Automatic preview updating paused” o simplemente un crash. Aquí tienes una lista de verificación para el iOS developer en apuros:

1. El botón “Diagnostics”: Cuando la preview falla, aparece un botón de “Diagnostics”. Púlsalo. A menudo el error no es de la preview, sino de tu código Swift normal que impide la compilación.
2. Dependencias en el Init: Si tu vista hace una llamada a red en el init(), la preview intentará ejecutarla. Como la preview corre en un entorno aislado (sandbox), esto puede fallar o ser lento. Mueve las llamadas de red a .task o .onAppear.
3. Clean Build Folder: El clásico Cmd + Shift + K. A veces la caché del Canvas se corrompe. Limpiar y reconstruir suele solucionarlo.
4. CoreData/SwiftData Crashes: Si usas @Environment(\.modelContext) y no inyectas el contenedor en la preview (.modelContainer(for: Item.self, inMemory: true)), la app crasheará inmediatamente.

// Ejemplo de inyección de SwiftData en Preview
import SwiftData

#Preview {
    MainListView()
        .modelContainer(for: Item.self, inMemory: true) // Vital: inMemory para velocidad
}

Conclusión: La Ventaja Competitiva

Dominar el arte de mostrar la vista previa de SwiftUI en Xcode transforma tu día a día. Dejas de adivinar y empiezas a esculpir interfaces. La capacidad de iterar sobre el diseño visual en segundos, probar variaciones de datos y verificar la accesibilidad sin ejecutar la app completa es lo que define a un iOS developer senior moderno.

La próxima vez que abras Xcode, no te limites a escribir código a ciegas. Abre el Canvas, configura tus macros #Preview y deja que SwiftUI te muestre lo que estás creando en tiempo real.

Si tienes cualquier duda sobre este artículo, contacta conmigo y estaré encantado de ayudarte 🙂. Puedes contactar conmigo en mi perfil de X o en mi perfil de Instagram