الترويسات الثابتة وقوائم الأقسام
جمّع العناصر باستخدام ترويسات مثبتة
الترويسات الثابتة وقوائم الأقسام درس مجاني في Jetpack Compose Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في 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! 🎉
الأسئلة الشائعة
هل درس «الترويسات الثابتة وقوائم الأقسام» مجاني؟
نعم — نص درس «الترويسات الثابتة وقوائم الأقسام» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Jetpack Compose Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.
ماذا ستتعلم في «الترويسات الثابتة وقوائم الأقسام»؟
جمّع العناصر باستخدام ترويسات مثبتة تتمرن على Jetpack Compose Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Jetpack Compose Academy؟
لا تُشترط خبرة سابقة. Jetpack Compose Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «الترويسات الثابتة وقوائم الأقسام»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Jetpack Compose Academy هذا؟
نعم. كل درس في Jetpack Compose Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- LazyColumn مقابل Column القابلة للتمرير
- items وitemsIndexed
- مفاتيح للقوائم السريعة والمستقرة
- الترويسات الثابتة وقوائم الأقسام