Android Academy · Aula

Column, Row e Box

Organize componentes composable em layouts comuns.

Column, Row e Box é uma aula grátis de Android Academy no CoddyKit. Esta é a aula 1 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 Android Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Android Academy inclui 4 aulas no total.

Organizando composables

Para posicionar composables uns em relação aos outros, o Compose oferece três composables de layout principais: Column, Row e Box.

Column: pilha vertical

Column empilha seus elementos filhos verticalmente, de cima para baixo.

Column {
    Text("First")
    Text("Second")
    Text("Third")
}

Row: pilha horizontal

Row posiciona seus elementos filhos lado a lado, da esquerda para a direita.

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

Box: sobreposição

Box empilha os elementos filhos uns sobre os outros, como camadas. Os elementos filhos posteriores são desenhados sobre os anteriores. É ótimo para emblemas, sobreposições e planos de fundo.

Box {
    Image(
        painter = painterResource(R.drawable.photo),
        contentDescription = null
    )
    Text("Caption")
}

Os elementos filhos são lambdas de conteúdo

Cada layout recebe uma lambda de conteúdo no final. Quaisquer composables chamados dentro dela se tornam seus elementos filhos. Não há XML — os elementos filhos são apenas chamadas de função.

Aninhando layouts

Os layouts podem ser aninhados livremente. Coloque uma Row dentro de uma Column para criar uma estrutura semelhante a uma grade ou uma lista de linhas.

Column {
    Row {
        Text("A")
        Text("B")
    }
    Row {
        Text("C")
        Text("D")
    }
}

Column versus LinearLayout

Se você já usou XML, Column é semelhante a um LinearLayout vertical, e Row é semelhante a um horizontal. Box é semelhante a um FrameLayout simples.

Dimensionamento padrão

Por padrão, um layout tem apenas o tamanho de seus elementos filhos (envolve o conteúdo). Você pode fazê-lo preencher o espaço disponível com modificadores como Modifier.fillMaxSize(), que será abordado na próxima lição.

contentAlignment em Box

Box pode alinhar todos os seus elementos filhos com contentAlignment. Por exemplo, você pode centralizar tudo.

Box(contentAlignment = Alignment.Center) {
    Text("Centered")
}

Escolhendo o componente certo

Escolha com base na direção: Column para a vertical, Row para a horizontal e Box para sobreposição ou centralização de um único elemento filho. A maioria das telas combina os três.

Juntando tudo

Um pequeno layout de perfil usando os três.

@Composable
fun Profile() {
    Column {
        Box(contentAlignment = Alignment.Center) {
            Image(
                painter = painterResource(R.drawable.avatar),
                contentDescription = null
            )
        }
        Row {
            Text("Posts ")
            Text("Followers")
        }
    }
}

Verificação rápida

Qual layout empilha seus elementos filhos uns sobre os outros (sobreposição)?

Recapitulação

Três layouts principais:

Column — pilha vertical.
Row — pilha horizontal.
Box — camadas sobrepostas; contentAlignment centraliza o conteúdo.

Eles podem ser aninhados livremente para criar qualquer tela.

Perguntas Frequentes

A aula “Column, Row e Box” é grátis?

Sim — o texto completo de “Column, Row e Box” é 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 Android Academy, atualize para CoddyKit PRO. O curso de Android Academy inclui 4 aulas no total.

O que vou aprender em “Column, Row e Box”?

Organize componentes composable em layouts comuns. Você pratica Android 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 Android Academy?

Nenhuma experiência prévia é necessária. Android 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 1 de 4.

Quanto tempo leva a aula “Column, Row e Box”?

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 Android Academy?

Sim. Cada aula de Android 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

← Voltar para Android Academy