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 modifiers son una herramienta esencial para dotar de personalidad única a tus aplicaciones. Estos modificadores permiten ajustar desde el tamaño de la fuente de un texto hasta la transparencia de un objeto gráfico. Conocer su uso no solo mejorará la estética de tus vistas, sino que optimizará la experiencia del usuario.
Empezaremos con los modifiers de texto. Cuando quieras cambiar el tamaño de la fuente, puedes utilizar el modifier font
. Si deseas un tamaño específico, usa el sistema y especifica el tamaño, por ejemplo, 50. Aquí te dejo un ejemplo sencillo de código en Swift:
Text("Nunca pares de aprender")
.font(.system(size: 50))
Si queremos que el texto siempre permanezca en una sola línea, empleamos lineLimit
y le decimos exactamente cuántas líneas queremos:
Text("Nunca pares de aprender")
.lineLimit(1)
Para alinear el texto a la derecha, utilizamos multilineTextAlignment
con el valor trailing
:
Text("Nunca pares de aprender")
.multilineTextAlignment(.trailing)
Puedes también añadir peso al texto con bold
y subrayarlo con underline
:
Text("Nunca pares de aprender")
.bold()
.underline()
Ahora, pasemos a los modifiers de layout utilizando figuras geométricas. Considera un círculo al que quieras cambiarle el color de fondo a verde y agregar espacio con padding
:
Circle()
.background(Color.green)
.padding()
Puedes incluso definir colores de fondo múltiple o cambiar el tamaño del frame:
Circle()
.frame(width: 200, height: 200)
.background(Color.red)
Este comportamiento sucede porque cada modifier crea una vista duplicada con la nueva personalización.
Utilizando un rectángulo, podemos ajustar el frame para controlar su tamaño y su color con foregroundStyle
:
Rectangle()
.frame(width: 200, height: 200)
.foregroundStyle(Color.yellow)
¿Buscas bordes redondeados? Usa cornerRadius
para darle un acabado más suave:
Rectangle()
.cornerRadius(20)
Finalmente, trabajemos con una elipse. Cambia el color de su contorno con stroke
y rota utilizando rotationEffect
:
Ellipse()
.stroke(lineWidth: 5)
.foregroundStyle(Color.red)
.rotationEffect(.degrees(30))
Este conocimiento te abre un mundo de posibilidades para que tus aplicaciones móvil brillen con personalidad y funcionalidad. No dudes en experimentar con estos y otros modifiers.
Aportes 5
Preguntas 1
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?