Column: disposição vertical e configuração do contêiner no Compose

O que é Column no Jetpack Compose

Column é uma função Composable que aceita parâmetros opcionais: modifier, verticalArrangement, horizontalAlignment e content — uma lambda com ColumnScope. Dentro da Column, as funções Composable filhas são organizadas de cima para baixo na ordem de declaração. A altura da Column é igual à soma das alturas dos filhos mais o espaço especificado por Arrangement. A largura é igual à largura máxima do filho considerando Alignment.

Column é um contêiner invisível: não tem fundo ou borda por padrão. Se precisar de um fundo, adicione Modifier.background() à própria Column. Ao contrário de LazyColumn, a Column renderiza todos os elementos filhos simultaneamente e não suporta virtualização. Isso significa que a Column é adequada apenas para conjuntos de dados pequenos — até 10-15 elementos. Para listas longas, use LazyColumn.

ColumnScope é o receiver da lambda content da Column. Ele fornece modificadores adicionais que funcionam apenas dentro da Column: weight(), align(), alignByBaseline(). Esses modificadores não fazem sentido fora da Column porque dependem das especificidades do layout vertical. Por exemplo, Modifier.align(Alignment.CenterHorizontally) alinha um elemento filho ao centro da Column horizontalmente.

Parâmetros da Column: Arrangement, Alignment, Modifier

VerticalArrangement determina como o espaço vertical é distribuído entre os elementos. Valores disponíveis: Arrangement.Top (padrão), Bottom, Center, SpaceBetween, SpaceEvenly, SpaceAround. Se a altura da Column for maior que a soma das alturas dos elementos, Arrangement distribui o espaço livre. Se os elementos ocuparem toda a altura, Arrangement não tem efeito.

HorizontalAlignment define o alinhamento horizontal de cada elemento filho. Alignment.Start (padrão para LTR), CenterHorizontally, End. Alignment atua em cada elemento independentemente: se um elemento é estreito e outro é largo, o primeiro será alinhado, o segundo pode ultrapassar os limites da Column. Alignment só funciona se a Column tiver largura fixa ou fillMaxWidth.

Modifier para Column: Column aceita um Modifier que se aplica ao próprio contêiner. Modifier.fillMaxWidth(), fillMaxHeight(), size(), padding() — todos os modificadores padrão funcionam. Nota especial: Modifier.height(IntrinsicSize.Min) força a Column a calcular a altura mínima com base nos elementos filhos usando medição Intrinsic.

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

    // IntrinsicSize: Column ajusta a altura ao conteúdo
@Composable
fun IntrinsicColumn() {
    Column(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .width(200.dp)
    ) {
        Text("Texto curto")
        Text("Um texto muito longo que será ajustado dentro da coluna")
    }
}

Column weight: distribuição de espaço entre elementos

Modifier.weight() é um modificador ColumnScope que distribui o espaço vertical livre entre os elementos da Column proporcionalmente aos pesos especificados. Se a Column ocupar 400dp de altura e os elementos filhos totalizarem 100dp, os 300dp restantes são divididos entre os elementos com weight. Um elemento com weight(2f) receberá o dobro de espaço que um elemento com weight(1f).

fill — o segundo parâmetro de weight: weight(weight: Float, fill: Boolean = true). Se fill = true (padrão), o elemento se estende por toda a altura disponível. Se fill = false, o elemento ocupa apenas sua altura intrínseca e o espaço restante fica vazio. Isso é útil quando um elemento deve estar grudado a um lado, mas weight define apenas a proporção de distribuição do espaço vazio.

Limitações do weight: weight só funciona em Column com altura fixa ou fillMaxHeight(). Se a altura da Column for determinada pelos elementos filhos (wrap content), os pesos não fazem sentido — não há espaço livre para distribuir. Além disso, weight não pode ser combinado com Modifier.height() no mesmo elemento — eles entram em conflito e weight é ignorado.

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

Column vs LazyColumn: quando usar cada um

Column renderiza todos os elementos filhos imediatamente. Se houver mais de 10-15 elementos, a Column cria uma carga significativa na composição e medição. LazyColumn, por outro lado, renderiza apenas os elementos visíveis e reutiliza os invisíveis. Para listas longas, listas com milhares de elementos, listas infinitas ou chats — LazyColumn é obrigatório.

Quando Column é melhor: telas com formulários (3-10 campos), cartões de perfil, colunas verticais com ícones, menus. Column também suporta IntrinsicSize, útil para altura adaptativa. Além disso, Column é mais fácil de depurar — sem virtualização, todos os elementos são visíveis no Layout Inspector. Para IU estática, Column é a escolha certa.

LazyColumn fornece: cache de itens, identidade baseada em chave, animação de adicionar/remover (animateItemPlacement), cabeçalhos fixos (sticky headers). Se a lista contiver elementos de diferentes tipos (diferentes viewType), use LazyColumn com sealed class em items. Column não suporta sticky headers (eles precisam ser emulados via Column rolável). Além disso, LazyColumn suporta LazyVerticalGrid ao usar GridCells.

Exemplos práticos de uso da Column

Vamos ver uma tela de perfil de usuário onde a Column é usada como contêiner principal para o avatar, nome, bio e botões de ação. Aqui, a Column com IntrinsicSize.Min se ajusta ao conteúdo e weight é usado para distribuir espaço entre as seções.

@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)
            )
            // Nome
            Text(name, style = MaterialTheme.typography.headlineSmall)
            // Bio
            Text(bio, style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(top = 4.dp))
            // Botões de ação
            Row(
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                modifier = Modifier.padding(top = 12.dp)
            ) {
                Button(onClick = { }) { Text("Mensagem") }
                OutlinedButton(onClick = { }) { Text("Seguir") }
            }
        }
    }
}

No exemplo, a Column usa Arrangement.spacedBy(8.dp) para espaçamento uniforme entre elementos. horizontalAlignment = CenterHorizontally centraliza o avatar, nome e bio. O Row dentro da Column é um contêiner aninhado para os botões em uma linha. Essa combinação de Column (disposição vertical) e Row (disposição horizontal) é um padrão típico de construção de IU no Compose.