Jetpack Compose Academy · Aula

Cabeçalhos Fixos e Listas por Seção

Agrupe itens com cabeçalhos fixos.

Cabeçalhos Fixos e Listas por Seção é uma aula grátis de Jetpack Compose Academy no CoddyKit. Esta é a aula 4 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.

Lists Often Have Sections

Real lists group data, like contacts by letter or emails by date. Each group deserves a clear header above its rows.

A Header Is Just an item

The simplest header is a single item block holding a styled Text. Place it before the group's items and it scrolls along.

item { Text("A", style = MaterialTheme.typography.titleMedium) }

Build Sections in a Loop

Loop over your grouped data and, for each group, add its header item then its items. This builds a clean section list.

groups.forEach { (letter, names) ->
    item { Text(letter) }
    items(names) { Text(it) }
}

The Problem: Headers Scroll Away

A plain header scrolls off the top with its rows. Mid-section, you lose track of which group you're even looking at.

Enter Sticky Headers

A stickyHeader pins itself to the top while its section scrolls beneath it. The current group label always stays in view. 📌

stickyHeader { Text("A") }

Use It Like item

Call stickyHeader exactly where you'd put a header item, just before the section's items block. Compose handles the pinning.

groups.forEach { (letter, names) ->
    stickyHeader { Text(letter) }
    items(names) { Text(it) }
}

One Header at a Time

As a new section reaches the top, its header pushes the old one up and out. Only the current group's header stays pinned.

Headers Need a Background

Give the sticky header a solid background. Without one, scrolling rows show through and the pinned text becomes hard to read.

stickyHeader {
    Text(letter, Modifier.background(Color.White).fillMaxWidth())
}

Group Your Data First

Prepare a grouped structure before composing, often with groupBy. Clean data makes the section loop short and readable.

val byLetter = names.groupBy { it.first() }

Sticky Headers Lives in LazyColumn

The stickyHeader builder is part of the LazyColumn scope. It works only inside a lazy list, not a plain Column.

Polished, Scannable Lists

Together, section headers and sticky pinning turn a long flat list into a scannable, professional screen users can navigate fast.

Quick Check

What does a sticky header do?

Recap: Headers That Stick

Build sections by pairing a header with items, then swap to stickyHeader so the group label pins while you scroll. Add a background! 🎉

Perguntas Frequentes

A aula “Cabeçalhos Fixos e Listas por Seção” é grátis?

Sim — o texto completo de “Cabeçalhos Fixos e Listas por Seção” é 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 “Cabeçalhos Fixos e Listas por Seção”?

Agrupe itens com cabeçalhos fixos. 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 4 de 4.

Quanto tempo leva a aula “Cabeçalhos Fixos e Listas por Seção”?

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

← Voltar para Jetpack Compose Academy