Fundamentos de SwiftUI y desarrollo de Interfaces
Desarrolla Apps IncreÃbles: primeros pasos con SwiftUI
Creación de views y uso de preview
Personalización de views con modifiers y uso de shapes
Image render
Composición de Layouts con Stacks
ScrollView y carousel
List y ForEach
Estructurando nuestra app
Quiz: Fundamentos de SwiftUI y desarrollo de Interfaces
Interacción del Usuario y Componentes de Entrada
Button y manejo de estado con @State
Text Field y Text Editor
Picker y DatePicker
Toggle y Slider
Formularios
Alertas y Modales
Gestures
Animaciones y uso del ProgressView
Quiz: Interacción del Usuario y Componentes de Entrada
Manejo del Estado y Arquitectura con ViewModels
ViewModels y @ObservedObject
Compartir Datos con @EnvironmentObject
Creación de Componentes Reutilizables con @Binding
Quiz: Manejo del Estado y Arquitectura con ViewModels
Navegación Avanzada
Navegación con NavigationStack
Personalización de la Barra de Navegación
Quiz: Navegación Avanzada
Lanzamiento de la app
Funcionalidades extra
Lanzamiento en simulador
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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.
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.
@State
para indicar que el valor de la variable puede cambiar.@State private var counter: Int = 0
Button("Aumentar") {
counter += 1
}
@State
resuelve este problema haciéndola mutable y permitiendo que la vista se redibuje automáticamente cuando cambie.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.
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.
Aportes 0
Preguntas 0
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?