0Pricing
Jetpack Compose Academy · Aula

Row: Colocando Elementos Lado a Lado

Disponha os elementos filhos da esquerda para a direita.

Row: Colocando Elementos Lado a Lado é uma aula grátis de Jetpack Compose Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Jetpack Compose Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Jetpack Compose Academy inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

Side by Side

When you want children in a horizontal line, you use a Row. It is the sideways sibling of Column. ➡️

Your First Row

A Row takes a trailing lambda just like Column. Each child you call inside lands next to the previous one, left to right.

Row {
    Text("Left")
    Text("Right")
}

Order Is Left to Right

Children flow in source order across the screen. The first Composable sits at the start, the next beside it, and so on.

A Classic Icon Plus Label

Rows shine for small pairs, like an Icon next to a Text label. That side-by-side combo is everywhere in real apps.

Row {
    Icon(Icons.Default.Star, null)
    Text("Favorite")
}

Spacing Between Children

Use horizontalArrangement with spacedBy to drop an even gap between each child instead of padding them one by one.

Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
    Text("A")
    Text("B")
}

Aligning Children Vertically

Set verticalAlignment to line children up across the row's height. CenterVertically keeps an icon and tall text neatly centered.

Row(verticalAlignment = Alignment.CenterVertically) {
    Icon(Icons.Default.Star, null)
    Text("Centered")
}

Pushing Items Apart

Arrangement.SpaceBetween pins the first child to the start and the last to the end, spreading any extra space between them.

Row(horizontalArrangement = Arrangement.SpaceBetween) {
    Text("Start")
    Text("End")
}

Sharing Space with Weight

Give a child weight in its modifier to make it claim the leftover width. Two equal weights split the row evenly.

Row {
    Text("Half", Modifier.weight(1f))
    Text("Half", Modifier.weight(1f))
}

Rows Don't Scroll Yet

A plain Row does not scroll. Children that overflow the width get clipped, so keep a basic Row to content that fits.

Adding Horizontal Scroll

For wide content, attach horizontalScroll to the Row's modifier and the whole strip becomes swipeable sideways.

Row(modifier = Modifier.horizontalScroll(rememberScrollState())) {
    Text("Wide content")
}

Rows Inside Columns

Most screens combine both. A Column stacks sections vertically while each section uses a Row to lay its pieces side by side.

Quick Check

Let's confirm how a Row lays out its children.

Recap: Row

You learned Row: it places children left to right, uses arrangement and alignment to position them, and shares width with weight for flexible layouts.

Perguntas Frequentes

A aula “Row: Colocando Elementos Lado a Lado” é grátis?

Sim — o texto completo de “Row: Colocando Elementos Lado a Lado” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Jetpack Compose Academy, atualize para CoddyKit PRO. O curso de Jetpack Compose Academy inclui 4 aulas no total.

O que vou aprender em “Row: Colocando Elementos Lado a Lado”?

Disponha os elementos filhos da esquerda para a direita. Você pratica Jetpack Compose Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Jetpack Compose Academy?

Nenhuma experiência prévia é necessária. Jetpack Compose Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Row: Colocando Elementos Lado a Lado”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Jetpack Compose Academy?

Sim. Cada aula de Jetpack Compose Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Column: Empilhando Elementos Verticalmente
  2. Row: Colocando Elementos Lado a Lado
  3. Box: Sobrepondo Camadas
  4. Disposição e Alinhamento
← Voltar para Jetpack Compose Academy