Row: colocar elementos uno junto a otro
Distribuya los elementos secundarios de izquierda a derecha.
Row: colocar elementos uno junto a otro es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 2 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 Jetpack Compose Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
Side by Side
When you want children in a horizontal line, you use a Row. It is the sideways sibling of Column. ➡️
Your First Row
A Row takes a trailing lambda just like Column. Each child you call inside lands next to the previous one, left to right.
Row {
Text("Left")
Text("Right")
}Order Is Left to Right
Children flow in source order across the screen. The first Composable sits at the start, the next beside it, and so on.
A Classic Icon Plus Label
Rows shine for small pairs, like an Icon next to a Text label. That side-by-side combo is everywhere in real apps.
Row {
Icon(Icons.Default.Star, null)
Text("Favorite")
}Spacing Between Children
Use horizontalArrangement with spacedBy to drop an even gap between each child instead of padding them one by one.
Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
Text("A")
Text("B")
}Aligning Children Vertically
Set verticalAlignment to line children up across the row's height. CenterVertically keeps an icon and tall text neatly centered.
Row(verticalAlignment = Alignment.CenterVertically) {
Icon(Icons.Default.Star, null)
Text("Centered")
}Pushing Items Apart
Arrangement.SpaceBetween pins the first child to the start and the last to the end, spreading any extra space between them.
Row(horizontalArrangement = Arrangement.SpaceBetween) {
Text("Start")
Text("End")
}Sharing Space with Weight
Give a child weight in its modifier to make it claim the leftover width. Two equal weights split the row evenly.
Row {
Text("Half", Modifier.weight(1f))
Text("Half", Modifier.weight(1f))
}Rows Don't Scroll Yet
A plain Row does not scroll. Children that overflow the width get clipped, so keep a basic Row to content that fits.
Adding Horizontal Scroll
For wide content, attach horizontalScroll to the Row's modifier and the whole strip becomes swipeable sideways.
Row(modifier = Modifier.horizontalScroll(rememberScrollState())) {
Text("Wide content")
}Rows Inside Columns
Most screens combine both. A Column stacks sections vertically while each section uses a Row to lay its pieces side by side.
Quick Check
Let's confirm how a Row lays out its children.
Recap: Row
You learned Row: it places children left to right, uses arrangement and alignment to position them, and shares width with weight for flexible layouts.
Preguntas frecuentes
¿La lección «Row: colocar elementos uno junto a otro» es gratis?
Sí — el texto completo de «Row: colocar elementos uno junto a otro» 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 Jetpack Compose Academy, actualiza a CoddyKit PRO. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Row: colocar elementos uno junto a otro»?
Distribuya los elementos secundarios de izquierda a derecha. Practicas Jetpack Compose 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 Jetpack Compose Academy?
No se requiere experiencia previa. Jetpack Compose 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 2 de 4.
¿Cuánto tiempo toma la lección «Row: colocar elementos uno junto a otro»?
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 Jetpack Compose Academy?
Sí. Cada lección de Jetpack Compose 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: apilar elementos verticalmente
- Row: colocar elementos uno junto a otro
- Box: superponer elementos
- Distribución y alineación