Jetpack Compose Column: por que a centralização não funciona e como corrigir

Por que a Column não obedece? A maldição da centralização no Jetpack Compose

Você já ficou à noite com uma xícara de café, escrevendo código Kotlin para Jetpack Compose e de repente percebeu que sua Column teimosamente se recusa a centralizar o conteúdo? Você adiciona Modifier.align(Alignment.CenterHorizontally) — e o texto ainda gruda na borda esquerda. Familiar?

Este problema é um verdadeiro sucesso no Stack Overflow. Milhares de desenvolvedores (e eu entre eles) bateram a cabeça na tela, tentando entender para onde foi o "gravity center". Neste artigo, vamos analisar os principais erros que transformam sua Column em uma lista incontrolável e aprender a evitá-los. Prepare-se: terá muito código, exemplos reais e sem enrolação.

Erro nº1: Confusão entre Column e Row

A primeira e mais comum armadilha é transferir hábitos do Android XML clássico. Lá, o LinearLayout tinha o atributo gravity="center". No Compose, é diferente.

Diferença chave: A Column organiza os elementos verticalmente. Portanto, "centralização horizontal" não é uma propriedade da própria Column, mas sim o comportamento de seus elementos filhos. Se você escreve:

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

Aqui, horizontalAlignment funciona, mas apenas se o próprio Text não estiver limitado em largura. E se você tiver Modifier.fillMaxWidth() no elemento filho — a centralização quebrará. Por quê? Porque o elemento se estica por toda a largura, e não há mais o que centralizar dentro dele.

Erro nº2: Modifier.align() em vez de horizontalAlignment

Aqui está o código-armadilha clássico que circula no Stack Overflow:

Column(\n    modifier = Modifier.fillMaxSize()\n) {\n    Text(\n        text = "Eu deveria estar no centro",\n        modifier = Modifier.align(Alignment.CenterHorizontally)\n    )\n}

À primeira vista, parece lógico. Mas isso não funcionará se a Column não tiver horizontalAlignment definido. O problema é que Modifier.align() é um modificador para Box e ColumnScope. Ele está disponível apenas dentro da Column, mas funciona em conjunto com horizontalAlignment. Se este último não for especificado, o align é simplesmente ignorado.

Como corrigir:

Column(\n    modifier = Modifier.fillMaxSize(),\n    horizontalAlignment = Alignment.CenterHorizontally  // obrigatório!\n) {\n    Text(\n        text = "Agora estou no centro",\n        modifier = Modifier.align(Alignment.CenterHorizontally) // opcional\n    )\n}

Erro nº3: Esquecer o Arrangement para vertical

Frequentemente, desenvolvedores querem centralizar o conteúdo da Column verticalmente (no eixo Y). Aqui entra em cena o verticalArrangement:

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

Mas há um detalhe: Arrangement.Center funcionará apenas se a Column ocupar toda a altura da tela (Modifier.fillMaxSize() ou Modifier.height(IntrinsicSize.Min)). Se a altura da Column for igual à soma das alturas dos elementos filhos — não haverá espaço para centralizar.

Erro nº4: IntrinsicSize e comportamento inesperado

Às vezes você adiciona Modifier.height(IntrinsicSize.Min) para que a Column se ajuste ao conteúdo. E aí a centralização vertical quebra:

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

10 melhores frameworks JavaScript para desenvolvimento web em 2025

Princípios SOLID em TypeScript: teoria e prática com exemplos

Microsserviços em C#: arquitetura e prática de nível avançado

Book Recommendations

GraphQL em JavaScript (Node.js): Guia Completo para Criar APIs Modernas

Concorrência em Go: dos fundamentos aos padrões avançados

C# (.NET) para iniciantes: curso completo

Desempenho de aplicações C# (.NET)

Leia também

Programação Funcional em C++: do A ao Z — Guia Prático Feature flags em C++: gerenciamento de funcionalidades sem dor e sem recompilação Monitoramento de aplicações C#: métricas e alertas em .NET Gráficos em Python: visualização de dados com Matplotlib Tratamento de Erros em TypeScript: Técnicas Avançadas de try/catch