Tu primera vista y el paradigma declarativo

SwiftUI cambia por completo cómo se construyen interfaces. En vez de crear botones y decirles qué hacer paso a paso, tú describes cómo debe verse la pantalla para un estado dado, y el framework se encarga del resto. Es el mismo salto mental que diste con map y filter, ahora aplicado a la UI.

• Entender “declarativo” frente a “imperativo”.
• El protocolo View y la propiedad body.
• Componer vistas básicas: Text, Image, Button.
• Usar el preview en vivo de Xcode.

Declarativo vs imperativo

En el modelo antiguo (imperativo) creabas una etiqueta, luego le ponías texto, luego color, luego la añadías a la pantalla — instrucción a instrucción. En SwiftUI (declarativo) simplemente describes el resultado:

import SwiftUIstruct Saludo: View {    var body: some View {        Text("¡Hola, mundo!")            .font(.largeTitle)            .foregroundStyle(.blue)    }}

No dices “crea un texto y luego cámbiale la fuente”: declaras “esto es un texto grande y azul”. Cuando el estado cambie, SwiftUI recalcula la descripción y actualiza la pantalla por ti.

El protocolo View y body

Toda vista de SwiftUI es un struct que conforma al protocolo View, y su único requisito es la propiedad body:

struct MiVista: View {    var body: some View {        Text("Contenido")    }}

Ahí está el ‘some View’

¿Recuerdas los tipos opacos del Nivel 1? body: some View significa “algún tipo concreto de vista”. No te preocupa cuál: SwiftUI lo resuelve. Y como las vistas son structs (tipos de valor), son ligeras de crear y destruir: SwiftUI las recrea constantemente sin coste, otra pieza del Nivel 1 encajando.

Vistas básicas

Text("Título").font(.title).bold()Image(systemName: "star.fill")     // iconos SF Symbols, gratis y enormes    .foregroundStyle(.yellow)Button("Guardar") {    print("guardado")              // trailing closure: la acción}

Image(systemName:) usa SF Symbols, la biblioteca de miles de iconos de Apple. Y ese { print("guardado") } del botón es un trailing closure — el código del Nivel 0 que se ejecuta al pulsar.

Componer: las vistas se anidan

Construyes interfaces metiendo vistas dentro de otras. Un contenedor VStack apila en vertical (lo verás a fondo en la próxima lección):

struct Tarjeta: View {    var body: some View {        VStack {            Image(systemName: "swift").font(.largeTitle)            Text("Swift").font(.title)            Text("Aprendiendo SwiftUI").foregroundStyle(.secondary)        }    }}

El preview en vivo

Lo que hace a SwiftUI adictivo: ves los cambios al instante, sin compilar y ejecutar la app entera. Añade un preview:

#Preview {    Tarjeta()}

Xcode muestra tu vista renderizada al lado del código y la actualiza mientras escribes.

El bucle de desarrollo más rápido

Con #Preview, el ciclo escribir → ver → ajustar tarda segundos, no un build completo. Puedes tener varios previews (distintos estados, modo claro/oscuro, varios tamaños) visibles a la vez. Aprovéchalo: itera en el preview y solo ejecuta en el simulador cuando necesites probar interacción real. Es la diferencia entre diseñar con fluidez y esperar compilaciones.

Tu primera pantalla

1. Crea una struct que conforme a View con una propiedad body.
2. Muestra un Text con .font() y .foregroundStyle().
3. Añade un Image(systemName:) con un SF Symbol que te guste.
4. Mételo todo en un VStack junto con un Button.
5. Añade un #Preview y observa el render en vivo.