SwiftUI es un poderoso framework que recién salió del horno y fue presentado recientemente el la WWDC de Apple en Junio del presente año; es un framework que solo funciona para crear apps en iOS 13 en adelante y hoy veremos una introducción a este framework que nos permite crear interfaces mucho más fácilmente y con menos líneas de código que con el enfoque tradicional.
SwiftUI es uno de esos frameworks que, cuando lo pruebas por primera vez, te hace pensar: “¿por qué no existía esto antes?”. Apple lo presentó en la WWDC de 2019 y desde entonces se ha convertido en la forma moderna de crear interfaces para el ecosistema Apple. En mi caso, venir de Swift clásico con storyboards hizo que el cambio fuera todavía más evidente: menos fricción, menos archivos y una forma mucho más natural de pensar la interfaz.
En esta guía te voy a mostrar los primeros pasos con SwiftUI, desde los conceptos clave hasta ejemplos prácticos, para que entiendas cómo funciona, por qué es más simple y cómo empezar a construir tus primeras apps sin volverte loco.
¿Qué es SwiftUI y por qué ha cambiado la forma de crear interfaces en iOS?
SwiftUI es un framework de Apple para construir interfaces de usuario usando programación declarativa. En lugar de decirle al sistema cómo dibujar cada elemento paso a paso, simplemente describes qué quieres mostrar y SwiftUI se encarga del resto.
Cuando empecé a usarlo, lo primero que me llamó la atención fue lo conciso que se vuelve el código. Donde antes necesitaba un storyboard, un controlador y múltiples conexiones, ahora todo vive en un solo archivo .swift.
Programación declarativa: cómo funciona SwiftUI realmente
El enfoque declarativo significa que describes el resultado final de la UI. Por ejemplo: “quiero un texto, debajo una imagen y todo centrado”. SwiftUI interpreta ese código y renderiza la interfaz.
Esto hace que:
- El código sea más legible.
- Sea más fácil iterar sobre ideas.
- Los cambios se reflejen casi instantáneamente.
SwiftUI vs UIKit: diferencias clave para principiantes
Si vienes de UIKit, el salto es grande:
- UIKit → imperativo, vistas + controladores, mucho código repetitivo.
- SwiftUI → declarativo, vistas como structs, actualización automática.
El mayor alivio es olvidarte de sincronizar manualmente la UI con los datos: cuando algo cambia, la vista se actualiza sola.
SwiftUI es el Flutter de Google pero desarrollado por Apple
¿Por qué empezar a desarrollar apps con SwiftUI?
SwiftUI no es solo “más bonito”, es más eficiente para aprender y mantener proyectos.
Un solo código para todas las plataformas Apple
Con SwiftUI puedes crear interfaces que funcionan en:
- iOS
- iPadOS
- macOS
- watchOS
Todo con la misma base de código. Esto fue clave para mí, porque te obliga a pensar en componentes reutilizables desde el principio.
Menos código, más claridad
Uno de los puntos fuertes que noté desde el primer día es que haces más con menos líneas. La intención del código es clara y no tienes que bucear entre archivos para entender qué hace una vista.
Vista y lógica en un solo lugar
En SwiftUI, una vista contiene tanto la estructura visual como la lógica básica que la acompaña. Esto simplifica mucho el flujo mental, sobre todo cuando estás empezando.
¿Por qué desarrollar nuestras aplicaciones en SwiftUI?
Con este poderoso framework, podemos desarrollar bajo un solo código para prácticamente todas las plataformas de Apple, desde macOS, watchOS el nuevo iPadOS y por supuesto iOS; podemos crear nuestras aplicaciones mediante una librería que nos ofrece una interfaz para nuestros componentes, una librería declarativa como hacemos para crear nuestras aplicaciones el Flutter pero con Swift.
La lógica para programar una aplicación en SwiftUI es mucho más sencilla que en Swift; para construir una aplicación en Swift al menos debes de trabajar en dos secciones, la vista mediante el main storyboard y el controlador, en SwiftUI podemos hacer todo desde un archivo con extensión .swift en la cual contenemos de alguna manera el controlador y la vista.
Requisitos para empezar con SwiftUI
Antes de escribir una sola línea, necesitas tener claro esto:
- Versiones de iOS compatibles
- SwiftUI funciona a partir de:
- iOS 13 en adelante (aunque cada versión nueva añade mejoras importantes).
- Xcode: qué necesitas instalar
- Necesitas Xcode 11 o superior. Es pesado (varios GB), pero incluye:
- El compilador de Swift.
- Simuladores.
- Vista previa en tiempo real.
Múltiples archivos y estructuras para definir tus componentes de vista (listas, botones, etc) en SwiftUI
La estructura básica es similar a la de Flutter, en la cual tenemos una especie de árbol de widgets o si lo quieres ver más genérico, de componentes que nosotros vamos profundizando a medida que tengamos más y más elementos o estos sean más completos y complejos.
Todo empieza con una View.
¿Qué es una View y por qué todo empieza ahí?
En SwiftUI, una vista es un struct que conforma el protocolo View. Dentro define una propiedad obligatoria llamada body.
struct ContentView: View {
var body: some View {
Text("Hola, SwiftUI")
}
}Eso es una interfaz funcional completa.
El método body y cómo SwiftUI renderiza la UI
body es una propiedad calculada. SwiftUI la evalúa cada vez que necesita redibujar la interfaz. No llamas tú a body; el framework lo hace cuando algo cambia.
Componentes y vistas en SwiftUI: construyendo con bloques
Aquí es donde SwiftUI realmente brilla.
SwiftUI es como construir con bloques de Lego: cada bloque es un componente que puedes combinar, reutilizar y extender.
Stacks: VStack, HStack y ZStack
Los stacks son contenedores que organizan vistas:
- VStack: vertical
- HStack: horizontal
- ZStack: superposición
Son la base de casi cualquier layout.
Pensar la interfaz como un árbol de componentes
La UI se organiza como un árbol: vistas que contienen otras vistas. Este enfoque es muy similar a Flutter o React, y una vez que haces clic mentalmente, todo encaja.
Fragmentar la UI para mantener el código limpio
En mis primeros proyectos aprendí rápido que una vista grande se vuelve inmanejable. SwiftUI te invita a dividir la interfaz en componentes pequeños, claros y reutilizables.
Otro punto fundamental es que podemos desarrollar múltiples componentes (un grupo de elementos de vistas) en un mismo archivo; por lo tanto podemos fragmentar nuestra interfaz en múltiples componentes, por ejemplo, un componente para un listado, otro para el detalle o cada item de ese listado y otro para la cabecera.
struct CoruseView : View {
var course = coursesData[0]
var body: some View {
return VStack(alignment: .leading) {
Text(course.title)
.font(.title)
.fontWeight(.bold)
.foregroundColor(.white)
.padding(20)
.lineLimit(4)
//.frame(width: 150)
Spacer()
Image(course.image)
.resizable()
.renderingMode(.original)
.aspectRatio(contentMode: .fit)
.frame(width: 246, height: 150)
.padding(.bottom, 30)
}.background(course.color)
.cornerRadius(30)
.frame(width: 246, height: 360)
.shadow(color: course.shadowColor, radius: 20, x: 0, y: 0)
}
}Y en nuestra vista principal:
ScrollView(showsHorizontalIndicator: false) {
HStack(spacing: 30) {
// ForEach(0 ..< 3) { item in
ForEach(courses) { course in
NavigationLink(destination: CoruseView(course: course)) {
CoruseView()
}
}
}.padding(.leading, 50)
}Y todo esto lo podemos guardar en un mismo archivo o en diferentes archivos, en diferentes carpetas, lo que nos trae un punto bueno y malo; el bueno es que podemos organizar nuestro proyecto como nosotros queramos en múltiples carpetas/archivos etc y lo malo también es precisamente ese punto, que al no tener una organización fija, puede traernos problemas al trabajar con proyectos de otras personas o en un equipo de trabajo.
Listas dinámicas y repetición de vistas con ForEach
Con SwiftUI podemos iterar fácilmente elementos de vista mediante una estructura ForEach y de esta manera evitar replicarlos manualmente, Por ejemplo, para tener un simple listado de elementos necesitas un componente List y dentro de este un componente Text:
List {
ForEach(categories.identified(by: \.self)) { key in
Text(key)
}
}Por ejemplo, si tenemos una estructura de usuarios:
NavigationView{
VStack {
List{
ForEach(users) { user in
Text(user.username)
}
}.navigationBarTitle(Text("Personajes"))
}
}
Esto es simplemente declarativo, es una forma de hacerlo, lo único que tienes que tener presente es que con un ForEach podemos crear elementos de vista de manera dinámica.
Por supuesto, esta lista de categories debe tener una estructura que lo veremos más adelante en otra entrada...
ForEach, HStack para apilar de manera horizontal, imágenes y textos
Ahora, si quieres tener un listado más interesante podrías crear otro componente y establecer una imagen y un texto; por lo tanto, ahora tendrías 3 componentes (sin contar los componentes de texto e imagen que estás empleando en este mismo componente) y de una aprovechamos e indicamos que queremos colocar una alineación; así como ocurre con los LinearLayout en Android o los mismos VStack en Swift clásico, aquí tenemos un par de componente para alinear o colocar elementos de manera vertical u horizontal:
List {
ForEach(categories.identified(by: \.self)) { key in
HStack(alignment: .top, spacing: 0) {
Image(key.image)
Text(key.name)
}
}Y con el parámetro alignment podemos alinearlos hacia el top, bottom, leading y luego indicamos que no queremos espaciado.
Reutilizar componentes en otros archivos
Anteriormente te comenté que podíamos fragmentar una vista, que corresponde a un solo archivo en múltiples componentes que a la final eran struct que contenían nuestros elementos de vista; pero como vez, vamos teniendo más código y perfectamente podemos colocar todo ese en un archivo aparte y de esta manera poder reutilizarlas cuando nosotros queramos y tener mejor orden:
struct CategoryItem: View {
var landmark: Landmark
var body: some View {
VStack(alignment: .leading) {
landmark
.image(forSize: 155)
.cornerRadius(5)
Text(landmark.name)
.font(.caption)
}
.padding(.leading, 15)
}
}Este código lo puedes guardar en un nuevo archivo de tipo SwiftUI con el nombre que tu quieras.
El componente es un struct y luce como el mostrado en el ejemplo anterior, en el cual recibe como parámetro una data, que es la que vamos a emplear para la construcción del componente, la cual colocamos en una vista tipo Stack o pila vertical y simplemente colocamos una imagen (cuyo componente es el Image) y un texto, además empleamos una serie de funciones que son conocidos como modificadores para personalizar estilos de estos elementos.
Ahora, podemos emplear este nuevo bloque compuesto creado por nosotros en cualquier otro componente, por ejemplo, el componente principal:
ScrollView(showsHorizontalIndicator: false) {
HStack(alignment: .top, spacing: 0) {
ForEach(self.items) { landmark in
CategoryItem(landmark: landmark)
}
}
}Iterar datos sin duplicar código
Con ForEach puedes generar vistas dinámicamente. Esto fue un antes y un después para mí, sobre todo cuando empecé a trabajar con listas reales de datos.
Combinar imágenes y texto en listas personalizadas
HStack {
Image(item.image)
Text(item.name)
}Reutilizar vistas y organizar tu proyecto
- Crear componentes reutilizables
- Una vista no es más que un struct. Puedes crear componentes que reciban datos y se reutilicen en cualquier parte.
- Separar vistas en archivos y carpetas
- Puedes guardar cada componente en su propio archivo SwiftUI. La libertad es total, y eso es bueno… y peligroso.
- Ventajas y riesgos de la flexibilidad en SwiftUI
- Lo bueno: organizas el proyecto como quieras.
- Lo malo: si no defines criterios claros, trabajar en equipo puede ser caótico. Aquí la disciplina marca la diferencia.
El estado en SwiftUI: interfaces que se actualizan solas
- Este es uno de los conceptos más importantes.
- Qué es el estado y por qué es tan importante
- El estado define los datos que, cuando cambian, provocan un cambio visual.
- Cómo cambian las vistas cuando cambian los datos
@State private var mensaje = "Hola" Text(mensaje) Button("Cambiar") { mensaje = "Hola SwiftUI" }
- No hay llamadas para refrescar la vista. SwiftUI lo hace por ti.
- Menos código, menos errores
- Cuando entendí esto, me di cuenta de cuánto código innecesario había escrito antes solo para mantener la UI sincronizada.
Recursos y tutoriales para desarrollar tus aplicaciones en SwiftUI
Por supuesto vas a querer más que un listado, por ejemplo, una imagen promocional lo que sería otro componente que puede tener otros componentes, ya sean los bases o alguno definido por ti; como ejemplificamos anteriormente, puedes crearte todos los componentes que quieras, añadirlos cuantas veces quieras y darle la forma que desees que tenga tu aplicación.
Aquí el propósito de estos ejemplos, es más que entiendas el código que lo iremos analizando poco a poco y te dejo tambien al final del post unos vídeos tutoriales gratuitos para que empieces a crear tus aplicaciones con SwiftUI, es que veas la lógica de programación y la forma en la que podemos construir nuestras aplicaciones como si fueran bloques de construcción.
De igual manera, tu mejor aliado es la documentación oficial en el siguiente enlace.
Esta es una idea que no es nueva, pero es muy interesante, nos permite desarrollar más rápidamente ya que estamos como construyendo con bloques de lego, bloques de lego en donde cada bloque es un componente distinto que puede ser un texto, listado una imagen o alguno creado por ti.
Los datos los podemos tener en local en archivos, json, o cualquier otro componente o traérnoslo de un servidor.
Podemos darles un estado a nuestros componentes, que en otras palabras significa que al variar el estado varía nuestros componentes asociados de manera directa e inmediata; de esta forma nos ahorramos mucho pero mucho código.
Puedes ver en el vídeo anterior y darte cuenta de la diferencia; en esta oportunidad estamos declarando elementos de la vista, en nuestro archivo, así como hace Flutter que todos nuestros componentes de interfaz son Widgets, aquí tenemos una organización similar en la cual componemos elementos que hacen referencia a un elemento de la interfaz mediante código, y podemos extender sus características mediante funciones.
Xcode para desarrollar tus aplicaciones con SwiftUI
Para desarrollar tus aplicaciones en SwiftUI es necesario que dispongas de xCode 11 o posterior que para la presente fecha el mismo se encuentra en fase beta; es un framework algo pesado, unos 11 gb pero cuando lo tengas descargado e instalado en tu Mac (la instalación es lo tradicional en ambientes Mac) ya estarás listo para empezar a desarrollar tus primeras aplicaciones; puedes descargarlo de App Store.
En el site oficial de Apple podrás obtener tutoriales para que conozcas cómo empezar a trabajar con este interesante framework que nos brinda Apple: SwiftUI Better apps. Less code Aquí verás recursos, descripciones y un interesante tutorial para dar los primeros pasos.
Preguntas frecuentes sobre SwiftUI para principiantes
- ¿SwiftUI es buena opción para aprender iOS desde cero?
- Sí. De hecho, hoy es la mejor puerta de entrada.
- ¿SwiftUI reemplaza completamente a UIKit?
- No del todo, pero cada vez cubre más casos reales.
- ¿Cuánto tiempo toma aprender SwiftUI?
- En pocos días puedes crear interfaces funcionales si ya sabes Swift.
- ¿Se puede usar SwiftUI en proyectos reales?
- Sí, y cada vez más apps en producción lo usan.
Conclusión: cómo avanzar después de tus primeros pasos con SwiftUI
SwiftUI no es solo un nuevo framework, es un nuevo paradigma mental. Pensar en interfaces como componentes declarativos simplifica el desarrollo y hace que crear apps sea más rápido y agradable.
Si estás dando tus primeros pasos con SwiftUI, mi consejo es claro: no intentes aprenderlo todo de golpe. Entiende bien las bases (vistas, stacks, estado y reutilización) y el resto vendrá solo.
Siguiente paso, aprende sobre los fundamentos de SwiftUI con los Texto, imágenes y los VStack