SwiftUI para Swift: guía completa con ejemplos

¿Qué es SwiftUI y para qué sirve?

SwiftUI es un framework moderno y declarativo para construir interfaces de usuario en todas las plataformas de Apple: iOS, macOS, watchOS y tvOS. A diferencia del enfoque tradicional de UIKit (donde gestionas manualmente el estado y la actualización de las vistas), SwiftUI te permite describir cómo debería ser la interfaz, no cómo construirla. El framework rastrea automáticamente los cambios de datos y redibuja solo las partes de la interfaz que han cambiado.

¿Para qué sirve?

\n
• Menos código: El mismo código funciona en todas las plataformas de Apple.
\n
• Declaratividad: Describes la interfaz como un conjunto de estructuras simples, no como una secuencia de comandos.
\n
• Gestión automática del estado: @State, @Binding, @ObservableObject — SwiftUI decide cuándo redibujar la interfaz.
\n
• Vista previa en vivo: En Xcode ves los cambios en tiempo real.
\n
• Animaciones: Añadir animaciones es una sola línea de código.
\n

SwiftUI no es una biblioteca que deba instalarse por separado. Es un framework integrado, disponible desde iOS 13, macOS 10.15, watchOS 6 y tvOS 13. Viene incluido con Xcode y el SDK de Apple.

Instalación (Configuración del proyecto)

Dado que SwiftUI es parte del SDK estándar de Apple, no es necesario instalarlo mediante pip, npm o CocoaPods. Todo lo que necesitas es Xcode (versión 11 o superior) y un proyecto configurado para iOS 13+ / macOS 10.15+.

Cómo crear un nuevo proyecto con SwiftUI:

\n
1. Abre Xcode.
\n
2. Selecciona File → New → Project.
\n
3. Elige la plantilla "App" (o "SwiftUI App" en versiones anteriores).
\n
4. Asegúrate de que en el campo "Interface" esté seleccionado "SwiftUI".
\n
5. Haz clic en "Next" y crea el proyecto.
\n

Si trabajas con un proyecto UIKit existente, puedes añadir un archivo SwiftUI (File → New → File → SwiftUI View). SwiftUI y UIKit pueden coexistir en un mismo proyecto mediante UIHostingController.

Inicio rápido con ejemplo de código

Vamos a crear una aplicación simple de "Contador de clics". Este es un ejemplo clásico que muestra los conceptos básicos de SwiftUI: estado, botones y texto.

import SwiftUI\n\nstruct ContentView: View {\n    // @State — es una propiedad que almacena el estado y redibuja automáticamente la View cuando cambia\n    @State private var count = 0\n\n    var body: some View {\n        VStack(spacing: 20) {\n            Text("Contador: \\(count)")\n                .font(.largeTitle)\n                .padding()\n\n            HStack(spacing: 20) {\n                Button("Aumentar") {\n                    count += 1\n                }\n                .padding()\n                .background(Color.blue)\n                .foregroundColor(.white)\n                .cornerRadius(10)\n\n                Button("Reiniciar") {\n                    count = 0\n                }\n                .padding()\n                .background(Color.red)\n                .foregroundColor(.white)\n                .cornerRadius(10)\n            }\n        }\n    }\n}\n\n// Punto de entrada de la aplicación\n@main\nstruct MyApp: App {\n    var body: some Scene {\n        WindowGroup {\n            ContentView()\n        }\n    }\n}\n

Explicación:

\n
• @State — le dice a SwiftUI que debe rastrear esta propiedad. Al cambiar count, SwiftUI redibuja automáticamente ContentView.
\n
• VStack y HStack — son contenedores para la disposición vertical y horizontal de elementos.
\n
• Button — crea un botón que ejecuta un bloque de código al presionarlo.
\n
• Modificadores (.font(), .padding(