Column: disposición vertical y configuración del contenedor en Compose

Qué es Column en Jetpack Compose

Column es una función Composable que acepta parámetros opcionales: modifier, verticalArrangement, horizontalAlignment y content — una lambda con ColumnScope. Dentro de Column, las funciones Composable hijas se organizan de arriba a abajo en el orden de declaración. La altura de Column es igual a la suma de las alturas de los hijos más el espacio especificado por Arrangement. El ancho es igual al ancho máximo del hijo considerando Alignment.

Column es un contenedor invisible: no tiene fondo ni borde por defecto. Si necesita un fondo, agregue Modifier.background() al propio Column. A diferencia de LazyColumn, Column renderiza todos los elementos hijos simultáneamente y no admite virtualización. Esto significa que Column solo es adecuado para conjuntos de datos pequeños — hasta 10-15 elementos. Para listas largas, use LazyColumn.

ColumnScope es el receptor de la lambda content de Column. Proporciona modificadores adicionales que solo funcionan dentro de Column: weight(), align(), alignByBaseline(). Estos modificadores no tienen sentido fuera de Column porque dependen de las particularidades del diseño vertical. Por ejemplo, Modifier.align(Alignment.CenterHorizontally) alinea un elemento hijo al centro de Column horizontalmente.

Parámetros de Column: Arrangement, Alignment, Modifier

VerticalArrangement determina cómo se distribuye el espacio vertical entre los elementos. Valores disponibles: Arrangement.Top (predeterminado), Bottom, Center, SpaceBetween, SpaceEvenly, SpaceAround. Si la altura de Column es mayor que la suma de las alturas de los elementos, Arrangement distribuye el espacio libre. Si los elementos ocupan toda la altura, Arrangement no tiene efecto.

HorizontalAlignment establece la alineación horizontal de cada elemento hijo. Alignment.Start (predeterminado para LTR), CenterHorizontally, End. Alignment actúa sobre cada elemento de forma independiente: si un elemento es estrecho y otro es ancho, el primero se alineará y el segundo puede extenderse más allá de los límites de Column. Alignment solo funciona si Column tiene un ancho fijo o fillMaxWidth.

Modifier para Column: Column acepta un Modifier que se aplica al propio contenedor. Modifier.fillMaxWidth(), fillMaxHeight(), size(), padding() — todos los modificadores estándar funcionan. Nota especial: Modifier.height(IntrinsicSize.Min) obliga a Column a calcular la altura mínima basada en los elementos hijos mediante la medición Intrinsic.

@Composable
fun ColumnArrangementDemo() {
    Column(
        modifier = Modifier.fillMaxSize().background(Color(0xFFF5F5F5)),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Arriba", modifier = Modifier.background(Color.Cyan))
        Text("Medio", modifier = Modifier.background(Color.Magenta))
        Text("Abajo", modifier = Modifier.background(Color.Yellow))
    }
}

    // IntrinsicSize: Column ajusta la altura al contenido
@Composable
fun IntrinsicColumn() {
    Column(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .width(200.dp)
    ) {
        Text("Texto corto")
        Text("Un texto muy largo que se ajustará dentro de la columna")
    }
}

Column weight: distribución del espacio entre elementos

Modifier.weight() es un modificador de ColumnScope que distribuye el espacio vertical libre entre los elementos de Column proporcionalmente a los pesos especificados. Si Column ocupa 400dp de altura y los elementos hijos suman 100dp, los 300dp restantes se dividen entre los elementos con weight. Un elemento con weight(2f) recibirá el doble de espacio que un elemento con weight(1f).

fill — el segundo parámetro de weight: weight(weight: Float, fill: Boolean = true). Si fill = true (predeterminado), el elemento se estira a toda la altura disponible. Si fill = false, el elemento solo ocupa su altura intrínseca y el espacio restante queda vacío. Esto es útil cuando un elemento debe estar pegado a un lado pero weight solo define la proporción de distribución del espacio vacío.

Limitaciones de weight: weight solo funciona en Column con altura fija o fillMaxHeight(). Si la altura de Column está determinada por los elementos hijos (wrap content), los pesos no tienen sentido — no hay espacio libre para distribuir. Además, weight no se puede combinar con Modifier.height() en el mismo elemento — entran en conflicto y weight se ignora.

@Composable
fun WeightedColumn() {
    Column(
        modifier = Modifier.fillMaxHeight().width(300.dp)
    ) {
        // Toma 1/6 de la altura (weight 1 de suma 1+2+3=6)
        Box(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()
                .background(Color.Red)
        )
        // Toma 2/6 de la altura
        Box(
            modifier = Modifier
                .weight(2f)
                .fillMaxWidth()
                .background(Color.Green)
        )
        // Toma 3/6 de la altura
        Box(
            modifier = Modifier
                .weight(3f)
                .fillMaxWidth()
                .background(Color.Blue)
        )
    }
}

Column vs LazyColumn: cuándo usar cada uno

Column renderiza todos los elementos hijos inmediatamente. Si hay más de 10-15 elementos, Column crea una carga significativa en la composición y medición. LazyColumn, por el contrario, solo renderiza los elementos visibles y reutiliza los invisibles. Para listas largas, listas con miles de elementos, listas infinitas o chats — LazyColumn es obligatorio.

Cuándo es mejor Column: pantallas con formularios (3-10 campos), tarjetas de perfil, columnas verticales con iconos, menús. Column también admite IntrinsicSize, útil para altura adaptativa. Además, Column es más fácil de depurar — no hay virtualización, todos los elementos son visibles en Layout Inspector. Para UI estática, Column es la opción correcta.

LazyColumn proporciona: caché de elementos, identidad basada en clave, animación de añadir/eliminar (animateItemPlacement), encabezados fijos (sticky headers). Si la lista contiene elementos de diferentes tipos (diferentes viewType), use LazyColumn con sealed class en items. Column no admite sticky headers (deben emularse mediante Column desplazable). Además, LazyColumn admite LazyVerticalGrid al usar GridCells.

Ejemplos prácticos de uso de Column

Veamos una pantalla de perfil de usuario donde Column se usa como contenedor principal para el avatar, nombre, bio y botones de acción. Aquí, Column con IntrinsicSize.Min se ajusta al contenido y weight se usa para distribuir el espacio entre secciones.

@Composable
fun UserProfileCard(name: String, bio: String) {
    Card(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Column(
            modifier = Modifier.fillMaxWidth().padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            // Avatar
            Icon(
                imageVector = Icons.Default.AccountCircle,
                contentDescription = "Avatar",
                modifier = Modifier.size(64.dp)
            )
            // Nombre
            Text(name, style = MaterialTheme.typography.headlineSmall)
            // Bio
            Text(bio, style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(top = 4.dp))
            // Botones de acción
            Row(
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                modifier = Modifier.padding(top = 12.dp)
            ) {
                Button(onClick = { }) { Text("Mensaje") }
                OutlinedButton(onClick = { }) { Text("Seguir") }
            }
        }
    }
}

En el ejemplo, Column usa Arrangement.spacedBy(8.dp) para espacios uniformes entre elementos. horizontalAlignment = CenterHorizontally centra el avatar, nombre y bio. El Row dentro de Column es un contenedor anidado para los botones en una fila. Esta combinación de Column (disposición vertical) y Row (disposición horizontal) es un patrón típico de construcción de UI en Compose.