Jetpack Compose Column: por qué no funciona la centración y cómo solucionarlo

¿Por qué Column no obedece? La maldición de la centración en Jetpack Compose

¿Alguna vez te has sentado por la noche con una taza de café, escribiendo código en Kotlin para Jetpack Compose, y de repente te has dado cuenta de que tu Column se niega obstinadamente a centrar el contenido? Añades Modifier.align(Alignment.CenterHorizontally) — y el texto sigue pegado al borde izquierdo. ¿Te suena?

Este problema es todo un éxito en Stack Overflow. Miles de desarrolladores (y yo entre ellos) se han golpeado la cabeza contra la pantalla tratando de entender dónde quedó el "gravity center". En este artículo analizaremos los principales errores que convierten tu Column en una lista incontrolable, y aprenderemos a evitarlos. Prepárate: habrá mucho código, ejemplos prácticos y nada de rodeos.

Error n.º 1: Confusión entre Column y Row

El primer y más común error es trasladar hábitos del Android XML clásico. Allí, LinearLayout tenía el atributo gravity="center". En Compose es diferente.

Diferencia clave: Column coloca los elementos verticalmente. Por lo tanto, "centrar horizontalmente" no es una propiedad de la propia Column, sino el comportamiento de sus elementos hijos. Si escribes:

Column(\n    modifier = Modifier.fillMaxSize(),\n    horizontalAlignment = Alignment.CenterHorizontally\n) {\n    Text("¡Hola, mundo!")\n}

Aquí horizontalAlignment funciona, pero solo si el propio Text no está limitado en ancho. Y si tienes Modifier.fillMaxWidth() en el elemento hijo, la centración se rompe. ¿Por qué? Porque el elemento se estira a todo lo ancho, y ya no hay nada que centrar dentro de él.

Error n.º 2: Modifier.align() en lugar de horizontalAlignment

Aquí tienes el clásico código-trampa que circula por Stack Overflow:

Column(\n    modifier = Modifier.fillMaxSize()\n) {\n    Text(\n        text = "Debería estar centrado",\n        modifier = Modifier.align(Alignment.CenterHorizontally)\n    )\n}

A primera vista, parece lógico. Pero esto no funcionará si Column no tiene definido horizontalAlignment. El problema es que Modifier.align() es un modificador para Box y ColumnScope. Está disponible solo dentro de Column, pero funciona en conjunto con horizontalAlignment. Si este último no se especifica, align simplemente se ignora.

Cómo solucionarlo:

Column(\n    modifier = Modifier.fillMaxSize(),\n    horizontalAlignment = Alignment.CenterHorizontally  // ¡obligatorio!\n) {\n    Text(\n        text = "Ahora estoy centrado",\n        modifier = Modifier.align(Alignment.CenterHorizontally) // opcional\n    )\n}

Error n.º 3: Olvidar Arrangement para la vertical

A menudo los desarrolladores quieren centrar el contenido de Column verticalmente (en el eje Y). Aquí entra en juego verticalArrangement:

Column(\n    modifier = Modifier.fillMaxSize(),\n    verticalArrangement = Arrangement.Center,\n    horizontalAlignment = Alignment.CenterHorizontally\n) {\n    Text("Centro del universo")\n    Button(onClick = { }) { Text("Botón") }\n}

Pero hay un matiz: Arrangement.Center solo funcionará si Column ocupa toda la altura de la pantalla (Modifier.fillMaxSize() o Modifier.height(IntrinsicSize.Min)). Si la altura de Column es igual a la suma de las alturas de los elementos hijos, no habrá espacio para centrar.

Error n.º 4: IntrinsicSize y comportamiento inesperado

A veces añades Modifier.height(IntrinsicSize.Min) para que Column se ajuste al contenido. Y entonces la centración vertical se rompe:

Column(\n    modifier = Modifier\n        .fillMaxWidth()\n        .height(IntrinsicSize.Min),\n    verticalArrangement = Arrangement.Center\n) {\n    Text("Texto 1")\n    Text("Texto 2")\n}

Problema:

Blogs

WebAssembly y C++: cómo ejecutar código en PythonLib en el navegador

Code review en Kotlin: qué revisar y cómo dar retroalimentación a principiantes

Flujo de trabajo Git para TypeScript: cómo no volverse loco con el código tipado

Book Recommendations

Go asíncrono (Golang): guía completa

Desarrollo de API en C# (.NET): desde lo básico hasta producción

Rendimiento de aplicaciones PHP: Optimización, almacenamiento en caché y perfilado

Desarrollo de API en TypeScript: de cero a producción

Leer también

Optimización del rendimiento de aplicaciones Swift: consejos y ejemplos Cómo enviar peticiones HTTP con requests en Python Domain-Driven Design en Java: no solo teoría, sino código vivo CLI en PHP: crea herramientas de consola desde cero Programación de redes en Rust: escribiendo un servidor TCP rápido y seguro