粘性页眉与分区列表
使用固定页眉对项目分组。
粘性页眉与分区列表 是 CoddyKit 上的免费 Jetpack Compose Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Jetpack Compose Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Jetpack Compose Academy 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
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! 🎉
常见问题解答
「粘性页眉与分区列表」课时是免费的吗？
是的 — 「粘性页眉与分区列表」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Jetpack Compose Academy 课程的其余内容，请升级到 CoddyKit PRO。 Jetpack Compose Academy 课程共包含 4 节课。
「粘性页眉与分区列表」这节课中我会学到什么？
使用固定页眉对项目分组。 你通过在浏览器中直接运行的动手代码来练习 Jetpack Compose Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Jetpack Compose Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Jetpack Compose Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「粘性页眉与分区列表」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Jetpack Compose Academy 课中编写并运行代码吗？
能。每节 Jetpack Compose Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。