Column, Row y Box
Organice composables en diseños habituales
Column, Row y Box es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 1 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.
Organización de composables
Para colocar composables en relación unos con otros, Compose le proporciona tres composables de diseño principales: Column, Row y Box.
Column: pila vertical
Column apila sus elementos secundarios verticalmente, de arriba abajo.
Column {
Text("First")
Text("Second")
Text("Third")
}Row: pila horizontal
Row coloca sus elementos secundarios uno al lado del otro, de izquierda a derecha.
Row {
Text("Left")
Text("Middle")
Text("Right")
}Box: superposición
Box apila los elementos secundarios uno encima de otro, como capas. Los elementos secundarios posteriores se dibujan sobre los anteriores. Es ideal para insignias, superposiciones y fondos.
Box {
Image(
painter = painterResource(R.drawable.photo),
contentDescription = null
)
Text("Caption")
}Los elementos secundarios son lambdas de contenido
Cada diseño recibe una lambda de contenido final. Los composables que invoque dentro se convierten en sus elementos secundarios. No hay XML: los elementos secundarios son simplemente llamadas a funciones.
Anidamiento de diseños
Los diseños se pueden anidar libremente. Coloque un Row dentro de un Column para crear una estructura similar a una cuadrícula o una lista de filas.
Column {
Row {
Text("A")
Text("B")
}
Row {
Text("C")
Text("D")
}
}Column frente a LinearLayout
Si ha utilizado XML, Column es similar a un LinearLayout vertical y Row a uno horizontal. Box es similar a un FrameLayout sencillo.
Tamaño predeterminado
De forma predeterminada, un diseño solo tiene el tamaño de sus elementos secundarios (wrap content). Puede hacer que ocupe todo el espacio disponible con modificadores como Modifier.fillMaxSize(), que se explican en la siguiente lección.
contentAlignment en Box
Box puede alinear todos sus elementos secundarios con contentAlignment. Por ejemplo, puede centrarlos todos.
Box(contentAlignment = Alignment.Center) {
Text("Centered")
}Elegir la opción adecuada
Elija según la dirección: Column para diseños verticales, Row para horizontales y Box para superposiciones o para centrar un único elemento secundario. La mayoría de las pantallas combina los tres.
Cómo unirlo todo
Un pequeño diseño de perfil que utiliza los tres.
@Composable
fun Profile() {
Column {
Box(contentAlignment = Alignment.Center) {
Image(
painter = painterResource(R.drawable.avatar),
contentDescription = null
)
}
Row {
Text("Posts ")
Text("Followers")
}
}
}Comprobación rápida
¿Qué diseño apila sus elementos secundarios uno encima de otro (superpuestos)?
Resumen
Tres diseños principales:
Column— pila vertical.Row— pila horizontal.Box— capas superpuestas;contentAlignmentcentra el contenido.
Se pueden anidar libremente para crear cualquier pantalla.
Preguntas frecuentes
¿La lección «Column, Row y Box» es gratis?
Sí — el texto completo de «Column, Row y Box» 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 «Column, Row y Box»?
Organice composables en diseños habituales 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 1 de 4.
¿Cuánto tiempo toma la lección «Column, Row y Box»?
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
- Column, Row y Box
- El sistema Modifier
- Alineación y distribución
- Listas con LazyColumn