Crear botones funcionales y atractivos es una de las habilidades fundamentales para cualquier persona que trabaje con SwiftUI. Desde un simple print en consola hasta diseños con colores e imágenes, los botones son el puente entre la interfaz y la lógica de tu aplicación. A continuación se explican las distintas formas de construirlos y modificarlos paso a paso.
¿Cómo organizar varias vistas dentro de una pantalla con VStack?
Antes de crear un botón, es necesario entender un detalle clave: el body de una estructura en SwiftUI solo puede devolver una única vista [01:23]. Si necesitas mostrar más de un elemento —textos, botones, imágenes— debes envolverlos en una vista contenedora.
La solución más directa es VStack, una pila vertical que agrupa varias vistas como si fueran una sola [01:42]. Al colocar elementos dentro de sus llaves, SwiftUI los apila de arriba hacia abajo.
- VStack acepta un número limitado de vistas hijas directas.
- Si superas ese límite, Xcode mostrará el error extra arguments [02:14].
- Una solución temporal es anidar un VStack dentro de otro, aunque puede traer complicaciones que se estudian más adelante.
¿Cómo crear tu primer botón con título y acción?
El control Button se inicializa de varias formas. La más básica recibe dos argumentos: un title (el texto visible) y un action (el código que se ejecuta al pulsarlo) [03:10].
swift
Button("Mi primer botón") {
print("Pulsé mi botón")
}
El bloque entre llaves se conoce como closure: un fragmento de código que se ejecuta automáticamente cuando el usuario interactúa con el botón, sin necesidad de declarar una función completa con la palabra reservada func [03:55]. Los closures son muy habituales en Swift y en otros lenguajes de programación.
Para verificar que funciona, conviene ejecutar la app en el simulador, ya que este ofrece acceso a la consola de debugging donde aparecen los mensajes de print [04:25].
¿Qué es el trailing closure y cómo simplifica el código?
Cuando el último parámetro de una función es un closure, Swift permite sacarlo fuera de los paréntesis. Esto se llama trailing closure y reduce la cantidad de código [05:30].
swift
Button("Mi segundo botón") {
print("Pulsé mi segundo botón")
}
Ambas formas producen exactamente el mismo resultado; es simplemente un atajo que ofrece el lenguaje.
¿Qué ventajas tiene usar el parámetro label en un botón?
La tercera forma de crear un botón utiliza los argumentos action y label [06:42]. A diferencia del title —que solo acepta texto plano—, el label recibe cualquier vista de SwiftUI: un Text, una imagen, un VStack con múltiples elementos, etc.
swift
Button {
print("Hola desde el botón con label")
} label: {
Text("Botón con label como argumento")
}
Esta flexibilidad abre muchas posibilidades creativas, porque puedes diseñar botones con imágenes, iconos o composiciones complejas.
¿Cómo separar la lógica del botón con un método externo?
Una buena práctica consiste en extraer la lógica a una función independiente para mantener la parte visual separada del comportamiento [08:00]. Dentro de la estructura, primero se declaran las variables y constantes, y luego las funciones.
swift
func saludo() {
print("Hola desde un método externo")
}
Después se referencia directamente en el action del botón:
swift
Button(action: saludo) {
Text("Botón con label")
.foregroundColor(.white)
.background(Color.blue)
}
Si el closure del action contiene únicamente la llamada a un método, puedes pasar el nombre de la función sin llaves. Si hubiera más líneas de código, las llaves son obligatorias [09:10].
¿Cómo personalizar la apariencia de un botón con modificadores?
Gracias al label, puedes aplicar modificadores a la vista interna para cambiar colores, fondos y más [09:35].
.foregroundColor(.white) cambia el color del texto a blanco..background(Color.blue) aplica un fondo azul al área del texto.
swift
Text("Botón con label")
.foregroundColor(.white)
.background(Color.blue)
Imagina las posibilidades: botones cuyo label sea una imagen, un video o cualquier composición de vistas que el usuario pueda seleccionar.
Es importante recordar que al crear el archivo para practicar, se nombró Buttons (en plural) porque Button es una palabra reservada del sistema [00:38]. Elegir nombres que no colisionen con el framework evita errores inesperados.
Si ya estás experimentando con botones personalizados, el siguiente paso natural es aprender a trabajar con vistas de tipo imagen para potenciar aún más el diseño de tus controles. ¿Qué tipo de botón te gustaría construir primero?
