Row no Jetpack Compose: o que é, propriedades composable e como funciona

O que é Row no Jetpack Compose

Row é uma função composable que coloca elementos filhos em uma sequência horizontal. Na hierarquia de layouts do Compose, Row ocupa a posição de um contêiner básico junto com Column e Box.

Row não requer especificação de dimensões — ele se ajusta automaticamente ao seu conteúdo. A largura de Row é igual à soma das larguras dos elementos filhos incluindo o preenchimento, a menos que Modifier.fillMaxWidth ou um tamanho fixo seja especificado.

Os elementos filhos de Row podem ter seus próprios modificadores que afetam sua posição dentro do contêiner. Por exemplo, Modifier.weight permite que os elementos ocupem uma parte proporcional do espaço disponível.

De acordo com Android Developers Blog, 2024, Row processa os elementos filhos sequencialmente, calculando seus tamanhos com base nas regras de medição do Compose: primeiro os elementos sem weight são medidos, depois o espaço restante é distribuído entre os elementos com weight.

Sintaxe e assinatura básica de Row

A assinatura básica de Row inclui o parâmetro modifier, horizontalArrangement e verticalAlignment. Todos os elementos filhos são passados no bloco lambda de conteúdo final.

@Composable
fun RowExample() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = "Um")
        Text(text = "Dois")
        Text(text = "Três")
    }
}

Propriedades de Row: horizontalArrangement e verticalAlignment

O parâmetro horizontalArrangement determina como os elementos filhos são distribuídos ao longo do eixo horizontal dentro de Row. Os valores disponíveis incluem Start, End, Center, SpaceBetween, SpaceAround e SpaceEvenly da classe Arrangement.

Arrangement.Start coloca os elementos no início do contêiner, Arrangement.End — no final, e Arrangement.Center — no centro. Esses valores funcionam de forma semelhante à propriedade justify-content no CSS Flexbox.

Arrangement.SpaceBetween distribui os elementos uniformemente, colocando o primeiro elemento no início, o último no final e os demais com espaçamento igual entre eles. De acordo com Material Design Guidelines, 2025, SpaceBetween é ideal para barras de ferramentas e linhas de navegação.

O parâmetro verticalAlignment alinha os elementos verticalmente. Os valores disponíveis incluem Alignment.Top, Alignment.CenterVertically e Alignment.Bottom. Esta propriedade é útil quando os elementos de Row têm alturas diferentes — por exemplo, um ícone ao lado de texto multilinha.

Tabela de valores de Arrangement

Distribuição de espaço com Modifier.weight

Modifier.weight é um modificador disponível apenas dentro de Row e Column que distribui o espaço disponível entre os elementos filhos proporcionalmente ao valor especificado. Se um elemento tem peso 1.0f e outro 2.0f, o segundo elemento ocupará o dobro do espaço.

Elementos sem weight ocupam o espaço necessário para seu conteúdo. O espaço restante é distribuído entre os elementos com weight proporcionalmente ao seu peso. Este comportamento é semelhante à propriedade flex-grow no CSS Flexbox.

De acordo com Android Developer Documentation, 2025, o weight funciona apenas dentro de Row, Column e BoxWithConstraints. Ao usar weight em Row, todos os elementos filhos são medidos em duas passadas: primeiro os elementos sem weight, depois os elementos com weight.

@Composable
fun WeightExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Start
    ) {
        Text(
            text = "Esquerda",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "Direita")
    }
}

Exemplos de código com Row

O primeiro exemplo demonstra Row com um ícone e texto — um cenário típico para uma lista de contatos ou configurações. Icon e Text são envolvidos em Row com verticalAlignment centralizado.

@Composable
fun IconWithText() {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(8.dp)
    ) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "Favorite"
        )
        Spacer(modifier = Modifier.width(8.dp))
        Text(text = "Adicionar aos favoritos")
    }
}

O segundo exemplo mostra Row com botões e distribuição uniforme. SpaceEvenly garante espaçamento igual entre todos os botões e as bordas do contêiner.

@Composable
fun ButtonRow() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = {}) { Text("Cancelar") }
        Button(onClick = {}) { Text("Salvar") }
    }
}

O terceiro exemplo — Row dentro de um Card para exibir uma classificação. Um Row aninhado com Modifier.weight permite que a estrela de classificação e o valor numérico ocupem espaço fixo.

@Composable
fun RatingRow(rating: Float) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "Classificação:",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "$rating / 5.0")
    }
}

Características de Row em layout adaptativo

Row requer controle de largura em layout adaptativo. Se o conteúdo de Row exceder a largura disponível da tela, os elementos podem transbordar os limites do contêiner. Para evitar isso, use Modifier.horizontalScroll ou mude para Column.

Ao combinar Row com Modifier.weight, é importante definir fillMaxWidth para o Row pai — caso contrário, o weight distribuirá espaço inexistente. De acordo com Material Design Guidelines, 2025, Row com weight sem fillMaxWidth é considerado uma configuração inválida.

Para interfaces adaptativas, recomenda-se combinar Row com Box ou usar Arrangement.SpaceBetween para distribuição automática de elementos em diferentes tamanhos de tela. Isso proporciona flexibilidade sem consultas de mídia.

• Modifier.horizontalScroll — adiciona rolagem quando Row transborda
• Modifier.weight — distribui espaço proporcionalmente
• Arrangement.SpaceBetween — distribuição adaptativa com fixação nas bordas