En este tutorial explicamos cómo hacer padding en swiftui a distintos elementos. Explicamos los principales parámetros que tiene la función padding, ya que no solo podemos dar un margen alrededor de todo un elemento, sino indicar el valor de cada lado, así como de arriba y abajo o combinaciones.
Resumen rápido padding en swiftui.
El padding básicamente es dar un margen alrededor de un elemento. En swiftui, esta función la podemos usar en cualquier widget o elemento.
La sintaxix para aplicar Padding a un Texto es la siguiente:
Text(“Prueba Padding siwft ui”).padding()Con este código, se deja un margen de un valor por default alrededor del Texto. Vemos que es muy fácil.
Dentro del paréntesis podemos indicar el tamaño del margen alrededor del elemento, de la siguiente manera:
Text(“Prueba Padding siwft ui tamaño 20”).padding(20)Pero también, es posible indicar si solo queremos el margen en ciertas zonas, por ejemplo, solo margen horizontal, es decir, margen superior e inferior.
Text(“Prueba Padding horizontal”).padding(.horizontal, 20)Estas son algunas de las opciones disponibles (iniciando con minúscula):
- All, en todos lados
- Horizontal, solo en las zonas horizontales.
- Vertical, solo en las zonas verticales.
- Bottom, margen inferior.
- Top, margen superior
- Leading, margen a la derecha.
- Trailing, margen a la izquierda.
Además podemos elegir el valor de cada margen usando init.
Text( “Personalizado.” ).padding( .init(top: 50, leading: 30, bottom: 40, trailing: 20 ))Ejemplo de padding en Swiftui.
En este ejemplo usaremos algunas de las características para comprender mejor la función padding y sus parámetros.
Tendremos 4 Textos dentro de un VStack, le daremos un color de fondo diferente a cada Texto para poder apreciar correctamente el efecto que provoca el padding.
Este es el código:
struct ContentView: View{
var body: some View{
VStack {
Text( "Hola mundo" ).background( Color.blue)
Text( "Hola mundo" ).padding().background( Color.red)
Text( "Hola mundo" ).padding(.vertical, 50).background( Color.gray)
Text( "Hola" ).padding(.init(top: 50, leading: 30, bottom: 40, trailing: 20 ))
.background( Color.green)
}
}
}Así es como se ve:
- En el primer texto no hemos agregado el padding y podemos notar la diferencia con el resto de Textos.
- Para el segundo usamos los valores por defecto, vemos como el margen del texto se expande alrededor.
- En el tercer Texto usamos un padding vertical y le damos un valor de 50. Notamos que solo en el lado derecho e izquierdo hay un margen.
- Para el cuarto y último Texto, usamos un margen distinto para cada lado, con el elemento Podemos ver como tenemos un padding top distinto al padding bottom. Y también un padding leading diferente al padding trailing.
Con esto ya podemos dominar los márgenes en los widgets o elementos de Suift UI, recordando que lo anterior se puede aplicar a cualquier elemento no solo a los Textos.
Temas de interés.
Para más tutoriales de Swift ve a este enlace.
Algunos temas que te pueden interesar:
String en Swift (multilínea, emojis, concatenar, saber si está vacío)