Sabit Başlıklar ve Bölüm Listeleri
Öğeleri sabit başlıklarla gruplayın.
Sabit Başlıklar ve Bölüm Listeleri, CoddyKit'te ücretsiz bir Jetpack Compose Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Jetpack Compose Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
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! 🎉
Yapay zeka eğitmeniyle Kotlin öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“Sabit Başlıklar ve Bölüm Listeleri” dersi ücretsiz mi?
Evet — “Sabit Başlıklar ve Bölüm Listeleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Jetpack Compose Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.
“Sabit Başlıklar ve Bölüm Listeleri” dersinde ne öğreneceğim?
Öğeleri sabit başlıklarla gruplayın. Jetpack Compose Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Jetpack Compose Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Jetpack Compose Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Sabit Başlıklar ve Bölüm Listeleri” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Jetpack Compose Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Jetpack Compose Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- LazyColumn ve Kaydırılabilir Column Karşılaştırması
- items ve itemsIndexed
- Kararlı ve Hızlı Listeler için Anahtarlar
- Sabit Başlıklar ve Bölüm Listeleri