Fixierte Überschriften und Abschnittslisten
Gruppieren Sie Elemente mit fixierten Überschriften.
Fixierte Überschriften und Abschnittslisten ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
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! 🎉
Häufig gestellte Fragen
Ist die Lektion „Fixierte Überschriften und Abschnittslisten“ kostenlos?
Ja — der vollständige Text von „Fixierte Überschriften und Abschnittslisten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Fixierte Überschriften und Abschnittslisten“?
Gruppieren Sie Elemente mit fixierten Überschriften. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?
Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Fixierte Überschriften und Abschnittslisten“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?
Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- LazyColumn vs. scrollbare Column
- items und itemsIndexed
- Keys für stabile, schnelle Listen
- Fixierte Überschriften und Abschnittslisten