Encabezados fijos y listas por secciones
Agrupe elementos con encabezados fijados.
Encabezados fijos y listas por secciones es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Jetpack Compose Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en 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! 🎉
Preguntas frecuentes
¿La lección «Encabezados fijos y listas por secciones» es gratis?
Sí — el texto completo de «Encabezados fijos y listas por secciones» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Jetpack Compose Academy, actualiza a CoddyKit PRO. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Encabezados fijos y listas por secciones»?
Agrupe elementos con encabezados fijados. Practicas Jetpack Compose Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Jetpack Compose Academy?
No se requiere experiencia previa. Jetpack Compose Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Encabezados fijos y listas por secciones»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Jetpack Compose Academy?
Sí. Cada lección de Jetpack Compose Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- LazyColumn frente a Column desplazable
- items e itemsIndexed
- Keys para listas estables y rápidas
- Encabezados fijos y listas por secciones