Jetpack Compose Academy · Lección

Column: apilar elementos verticalmente

Distribuya los elementos secundarios de arriba abajo.

Column: apilar elementos verticalmente es una lección gratuita de Jetpack Compose 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 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.

Stacking Vertically

When you want children to sit top to bottom, you reach for Column. It is Compose's go-to layout for vertical stacks. 📚

Your First Column

A Column takes a trailing lambda. Every Composable you call inside it becomes a child, drawn in the order you write them.

Column {
    Text("First")
    Text("Second")
}

Order Is Top to Bottom

Children stack in source order. The first Composable sits at the top, the next below it, and so on down the screen.

Mixing Different Children

A Column can hold any Composables, not just Text. Buttons, Images, and even other Columns all stack happily inside it.

Column {
    Text("Title")
    Button(onClick = {}) { Text("Go") }
}

Default Sizing: Wrap Content

By default a Column is only as tall and wide as its children need. It shrinks to wrap its content unless you tell it otherwise.

Filling the Width

Add a Modifier to change size. fillMaxWidth makes the Column stretch across the whole screen horizontally.

Column(modifier = Modifier.fillMaxWidth()) {
    Text("Wide column")
}

Spacing Between Children

Use verticalArrangement with spacedBy to put even gaps between every child. No manual padding on each item needed.

Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
    Text("A")
    Text("B")
}

Aligning Children Sideways

Set horizontalAlignment to line children up. CenterHorizontally pulls them all to the middle of the Column's width.

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    Text("Centered")
}

Columns Don't Scroll Yet

A plain Column does not scroll. If children run past the screen they get clipped, so it suits short, fixed lists best.

Adding Scroll When Needed

For longer content, attach verticalScroll to the Column's modifier. Now the whole stack scrolls as one piece.

Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
    Text("Long content")
}

Nesting for Real Screens

Real screens nest Columns inside Columns. An outer Column holds sections, and each section is its own little Column of details.

Quick Check

Let's confirm how a Column arranges its children.

Recap: Column

You learned Column: it stacks children top to bottom in order, wraps content by default, and uses arrangement, alignment, and modifiers to size and space them.

Preguntas frecuentes

¿La lección «Column: apilar elementos verticalmente» es gratis?

Sí — el texto completo de «Column: apilar elementos verticalmente» 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 «Column: apilar elementos verticalmente»?

Distribuya los elementos secundarios de arriba abajo. 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 1 de 4.

¿Cuánto tiempo toma la lección «Column: apilar elementos verticalmente»?

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

← Volver a Jetpack Compose Academy