Espaciado con Padding
Use Modifier para controlar el espaciado
Espaciado con Padding es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Android Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Android Academy incluye 4 lecciones en total.
¿Qué es Padding?
Padding es el espacio vacío que se añade alrededor del contenido de un composable. Separa el contenido de los bordes para que nada parezca demasiado apretado.
En Compose, se añade padding mediante un Modifier.
Text(
text = "Hello",
modifier = Modifier.padding(16.dp)
)La unidad dp
Los tamaños de padding usan dp, abreviatura de píxeles independientes de la densidad. dp mantiene el mismo tamaño físico en todas las pantallas.
Escriba un número seguido de .dp, como 8.dp o 24.dp.
Modifier.padding(8.dp)¿Qué es un Modifier?
Un Modifier describe el aspecto y el comportamiento de un composable: su tamaño, padding, fondo y mucho más.
Puede crear modificadores encadenando funciones mediante puntos.
Modifier
.padding(16.dp)
.background(Color.Yellow)Padding en todos los lados
Al llamar a padding(16.dp) con un solo valor, se añade el mismo espacio en los cuatro lados: arriba, abajo, inicio y final.
Es la forma más rápida de dar espacio suficiente al contenido.
Box(
modifier = Modifier.padding(16.dp)
) {
Text("Inside")
}Padding horizontal y vertical
Puede establecer los lados por separado con los parámetros horizontal y vertical.
Horizontal abarca el inicio y el final; vertical abarca la parte superior e inferior.
Modifier.padding(
horizontal = 24.dp,
vertical = 8.dp
)Padding en un solo lado
Para aplicar padding a un solo borde, indique su nombre: start, top, end o bottom.
Así puede ajustar el espaciado exactamente donde lo necesite.
Modifier.padding(
start = 16.dp,
top = 4.dp
)El orden importa
El orden de los Modifier cambia el resultado. Si coloca padding antes de un fondo, el área añadida queda sin pintar; después del fondo, este rellena también el padding.
Lea los modificadores de arriba abajo, como si fueran capas.
Modifier
.background(Color.Cyan)
.padding(16.dp)Espaciado entre elementos
Dentro de un Column o un Row, use Arrangement.spacedBy para añadir automáticamente espacios iguales entre los elementos secundarios.
Es más limpio que añadir padding manualmente a cada elemento.
Column(
verticalArrangement = Arrangement.spacedBy(12.dp)
) {
Text("One")
Text("Two")
}Spacer para crear espacios
Un Spacer es un composable vacío que se usa para separar elementos. Asígnele un tamaño con un Modifier.
Resulta práctico para crear un espacio fijo entre dos elementos.
Column {
Text("Top")
Spacer(Modifier.height(16.dp))
Text("Bottom")
}Padding frente a margin
Compose no tiene un margin independiente. Puede crear espacio exterior colocando padding antes en la cadena de modificadores, antes del tamaño o del fondo.
Por tanto, una sola herramienta, padding, gestiona el espaciado interior y exterior según el orden.
Modifier
.padding(16.dp)
.background(Color.LightGray)
.padding(8.dp)Espaciado uniforme
Las buenas aplicaciones usan unos pocos valores repetidos, como 4, 8, 16 y 24 dp. Esto mantiene los diseños ordenados y predecibles.
Evite los números aleatorios; elija valores de una escala pequeña.
Modifier.padding(16.dp)Comprobación rápida
Compruebe cuánto sabe sobre padding.
Resumen
Padding añade espacio alrededor del contenido mediante Modifier.padding con valores en dp. Puede aplicar padding a todos los lados, de forma horizontal o vertical, o a un solo borde.
El orden de los Modifier importa, y Arrangement.spacedBy o Spacer gestionan los espacios entre elementos.
A continuación, explorará los colores y MaterialTheme.
Preguntas frecuentes
¿La lección «Espaciado con Padding» es gratis?
Sí — el texto completo de «Espaciado con Padding» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Android Academy, actualiza a CoddyKit PRO. El curso de Android Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Espaciado con Padding»?
Use Modifier para controlar el espaciado Practicas Android Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Android Academy?
No se requiere experiencia previa. Android Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Espaciado con Padding»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Android Academy?
Sí. Cada lección de Android Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Aplicar estilos al texto
- Botones y clics
- Espaciado con Padding
- Colores y MaterialTheme