Android Academy · Aula

Fundamentos de Text e Column

Exiba e empilhe conteúdo.

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

O componível de texto

O elemento mais básico que você pode exibir no Compose é texto. O componível Text desenha uma string na tela.

Você passa a string que deseja exibir como primeiro argumento. É tudo o que é necessário para colocar palavras na tela.

@Composable
fun Hello() {
    Text("Hello, Android!")
}

Estilizando texto

Text aceita parâmetros para alterar sua aparência. Você pode definir fontSize, color e fontWeight.

Os tamanhos usam a unidade sp, que acompanha as configurações de fonte do usuário. Isso mantém o aplicativo legível para todos.

Text(
    "Big Title",
    fontSize = 24.sp,
    fontWeight = FontWeight.Bold
)

Por que você precisa de um layout

Se você chamar Text duas vezes seguidas, os dois textos ficarão no mesmo lugar, sobrepostos. Os componíveis não se organizam automaticamente.

Para posicionar os elementos em ordem, você precisa de um componível de layout que organize seus filhos. O mais comum para empilhamento vertical é Column.

O componível Column

Column organiza seus filhos verticalmente, um abaixo do outro. Você coloca os componíveis filhos dentro do bloco lambda final.

Cada componível escrito entre as chaves se torna uma linha nessa pilha vertical, na ordem em que foi escrito.

@Composable
fun TwoLines() {
    Column {
        Text("First line")
        Text("Second line")
    }
}

A ordem importa em uma Column

Dentro de uma Column, os filhos aparecem de cima para baixo exatamente na ordem em que você os lista. Mova uma linha para cima no código, e ela subirá na tela.

Isso torna os layouts previsíveis: leia o código de cima para baixo e saberá como a tela aparece nessa mesma ordem.

Column {
    Text("Title")
    Text("Subtitle")
    Text("Body text")
}

Organização vertical

Column pode controlar o espaçamento entre seus filhos usando verticalArrangement. Por exemplo, Arrangement.spacedBy adiciona intervalos uniformes.

Isso é mais limpo do que adicionar espaçamento manualmente a cada filho e mantém o layout consistente.

Column(
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    Text("One")
    Text("Two")
}

Alinhamento horizontal

Por padrão, uma Column alinha seus filhos no início (à esquerda). Use horizontalAlignment para centralizá-los ou alinhá-los ao final.

Defina-o como Alignment.CenterHorizontally para centralizar cada filho dentro da largura da coluna.

Column(
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Centered")
    Text("Also centered")
}

Conheça a Row

Column organiza os elementos verticalmente; sua irmã, Row, organiza os elementos lado a lado, horizontalmente. Elas seguem a mesma ideia, mas em direções diferentes.

Você combinará Rows e Columns para criar grades e cartões. Por enquanto, lembre-se: Column vai para baixo; Row vai para os lados.

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

Aninhando layouts

Os layouts podem conter outros layouts. Você pode colocar uma Row dentro de uma Column para criar designs mais elaborados.

Aqui, uma coluna mostra um título e, em seguida, uma linha com dois trechos de texto abaixo. O aninhamento é a forma de criar telas complexas a partir de partes simples.

Column {
    Text("Score")
    Row {
        Text("Home")
        Text("Away")
    }
}

Adicionando espaço entre itens

Para adicionar um intervalo fixo entre dois elementos compostos, você pode inserir um Spacer. Ele é um elemento composto vazio que apenas ocupa espaço.

Atribua a ele uma altura por meio de um modificador, e ele empurrará o próximo item para baixo. Exploraremos mais sobre modificadores na próxima lição.

Column {
    Text("Top")
    Spacer(modifier = Modifier.height(16.dp))
    Text("Bottom")
}

Juntando tudo

Com Text e Column, você já pode criar uma tela simples com rótulos. Empilhe um título e algumas linhas de detalhes.

Esse pequeno padrão é a base de quase todas as telas do Compose que você criará.

@Composable
fun InfoBlock() {
    Column {
        Text("Name: Ada")
        Text("Role: Engineer")
    }
}

Verificação rápida

Vamos testar sua compreensão da direção dos layouts.

Recapitulação

Você aprendeu a exibir strings com Text e a aplicar estilos usando fontSize e fontWeight. Uma Column empilha os elementos na ordem em que aparecem no código, enquanto uma Row os organiza horizontalmente.

Você pode controlar o espaçamento com verticalArrangement ou um Spacer e alinhar os elementos com horizontalAlignment. Aninhar Rows e Columns permite criar layouts mais elaborados. Em seguida, você visualizará essas telas sem executar o aplicativo.

Perguntas Frequentes

A aula “Fundamentos de Text e Column” é grátis?

Sim — o texto completo de “Fundamentos de Text e Column” é 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 “Fundamentos de Text e Column”?

Exiba e empilhe conteúdo. 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 2 de 4.

Quanto tempo leva a aula “Fundamentos de Text e Column”?

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