Creación y Funcionalidad de Botones en SwiftUI

Curso de Desarrollo de Aplicaciones con SwiftUI

Contenido del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:00

Creación y Funcionalidad de Botones en SwiftUI

Curso de Desarrollo de Aplicaciones con SwiftUI

Clase 9 de 23

Clase 9 / 23

Recursos

Los estados juegan un papel crucial al permitir actualizaciones en la interfaz sin complicaciones.

Para comenzar, organiza tu proyecto. Crea una nueva carpeta llamada extras donde almacenarás todas las prácticas. Dentro de extras, genera un nuevo archivo SwiftUI llamado button practice.

Dentro de este archivo, empieza eliminando cualquier texto preexistente y añadiendo un botón con el siguiente código:

Button("PressMe") {
    print("El botón está funcionando")
}

Ahora, al previsualizar, notarás que el botón básico aparece en tu lienzo interactivo.

¿Cómo hacer que un botón incremente un contador?

Agregar funcionalidad a tu botón es donde empieza la magia de SwiftUI. Imaginemos que deseas crear un contador que se incrementa cada vez que presionas el botón. Aquí es donde los states entran en juego.

Declara una variable de contador:
- Necesitas crear una variable mutable que almacenará el valor del contador. Usa el decorador @State para indicar que el valor de la variable puede cambiar.
@State private var counter: Int = 0
Incrementa el contador:
- Modifica la acción del botón para aumentar el valor del contador.
Button("Aumentar") { counter += 1 }
Comprueba el error de inmutabilidad:
- SwiftUI genera un error si intentas modificar una variable constante. El decorador @State resuelve este problema haciéndola mutable y permitiendo que la vista se redibuje automáticamente cuando cambie.

¿Cómo visualizar el contador en tiempo real?

Para mostrar visualmente el valor del contador, integra un VStack que contiene el contador dentro de tu vista. Esto permitirá redibujar el texto cada vez que cambie el valor del contador.

VStack {
    Text("\(counter)")
    Button("Aumentar") {
        counter += 1
    }
}

Cada vez que presiones el botón, el texto se actualizará para reflejar el nuevo valor del contador.

¿Cómo personalizar un botón en SwiftUI?

SwiftUI te ofrece la flexibilidad de personalizar la interfaz de tus botones. Puedes sustituir el texto por imágenes o cualquier vista que prefieras. Usa el atributo label para lograrlo.

Button(action: {
    counter += 1
}) {
    Image(systemName: "house")
}

Esta modificación convierte tu botón en un icono de casa, manteniendo su funcionalidad anterior. Para mejorar el diseño, puedes añadir un padding a tu VStack:

VStack {
    Text("\(counter)")
    Button(action: {
        counter += 1
    }) {
        Image(systemName: "house")
    }
}
.padding(30)

Con este simple ajuste, tu aplicación no solo es más funcional, sino también más atractiva visualmente. Ahora tienes un contador que reacciona a las interacciones del usuario y se ve genial.

Tu aventura con SwiftUI apenas comienza. Las interacciones dinámicas y los estados te abrirán muchas puertas en el desarrollo de tus futuras aplicaciones. ¡No te detengas aquí! Sigue explorando y aprendiendo nuevas formas de mejorar la experiencia del usuario en tus aplicaciones.

Fundamentos de SwiftUI y desarrollo de Interfaces

Creación de Apps Modernas con SwiftUI

Crea tu primera app de notas en SwiftUI

Uso de Modifiers en SwiftUI para Personalizar Vistas

Dibujo y Personalización de Íconos e Imágenes en Xcode

Creación de Layouts Complejos con Stacks en SwiftUI

Scroll View y Stacks: Creación de Listas y Carruseles en SwiftUI

Listas nativas en SwiftUI con datos reales

Buenas prácticas en SwiftUI: Creación y organización de vistas y modelos

Interacción del Usuario y Componentes de Entrada

Creación y Funcionalidad de Botones en SwiftUI

TextField y TextEditor en SwiftUI

Uso de Pickers en SwiftUI para Selección de Fechas y Opciones

Implementación de Sliders y Toggles en SwiftUI

Formulario de notas con SwiftUI

Alerts y Sheets para mostrar formularios

Gestos en SwiftUI: tap, drag y long press

Animaciones y Transiciones en SwiftUI con ProgressView

Manejo del Estado y Arquitectura con ViewModels

Cómo crear tu primer ViewModel en SwiftUI

Conexión de datos en apps con Environment Object en SwiftUI

Creación de Componentes Reutilizables con @Binding en SwiftUI

Navegación Avanzada

Navegación SwiftUI de lista a detalle

Personalización de Tool Bar y Navegación con TabViews en SwiftUI

Lanzamiento de la app

Añadir botón de favoritos y configurar icono de aplicación

Lanzamiento de tu Primera App con SwiftUI en el Simulador

Creación y Funcionalidad de Botones en SwiftUI

Progreso del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Recursos

Recursos