Uso de Modifiers en SwiftUI para Personalizar Vistas

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:009:02

Uso de Modifiers en SwiftUI para Personalizar Vistas

Curso de Desarrollo de Aplicaciones con SwiftUI

Clase 3 de 23

Clase 3 / 23

Recursos

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.

¿Cómo personalizar texto con modifiers?

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()

¿Cómo modificar el layout de figuras?

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.

¿Qué tal un rectángulo como el nuevo protagonista?

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)

¿Y si queremos una elipse?

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.