مفاتيح للقوائم السريعة والمستقرة
ساعد Compose على تتبع العناصر أثناء التغييرات
مفاتيح للقوائم السريعة والمستقرة درس مجاني في Jetpack Compose Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Jetpack Compose Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
How Compose Tracks Rows
By default, Compose identifies each row by its position in the list. Item zero is item zero, item one is item one, and so on.
Position Breaks on Change
When you insert or remove a row, every item below shifts position. Compose now thinks those rows are different and rebuilds them needlessly.
The Cost of Confusion
Rebuilt rows lose their state and animations. A removed item can make the whole list flicker as Compose reshuffles everything below it.
Give Each Item a Key
A key is a stable, unique value that names each item by identity, not position. Then Compose follows items even as they move.
items(users, key = { it.id }) { user ->
Text(user.name)
}Use a Real Unique ID
The best key is a true unique id from your data, like a database id. It stays the same no matter where the item sits.
Keys Must Be Unique
Every key in the list must be different. Duplicate keys throw a runtime error, so never key items by a value two rows might share.
Don't Key by Index
Using the index as a key defeats the purpose, since indexes shift just like position. Reach for it only when you truly have no id.
State Stays With the Item
With stable keys, a row's remembered state travels with it. A checkbox stays checked even after items above it are deleted.
Keys Power Animations
Stable keys let Compose animate items moving, appearing, or leaving. Without them, it can't tell a move from a rebuild.
items(items, key = { it.id }) { item ->
Text(item.label, Modifier.animateItem())
}itemsIndexed Takes Keys Too
The itemsIndexed builder also accepts a key lambda. You still get the index, plus stable identity for every row.
itemsIndexed(data, key = { _, item -> item.id }) { i, item ->
Text("$i: ${item.name}")
}Keys Are Almost Always Worth It
For any list that can change, adding keys is a tiny effort with a big payoff: correct state, smooth animations, and fewer rebuilds.
Quick Check
What makes a good list key?
Recap: Stable Keys, Stable Lists
Keys give items identity beyond position. Use a real unique id, keep keys unique, and your state and animations just work. ✨
الأسئلة الشائعة
هل درس «مفاتيح للقوائم السريعة والمستقرة» مجاني؟
نعم — نص درس «مفاتيح للقوائم السريعة والمستقرة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Jetpack Compose Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.
ماذا ستتعلم في «مفاتيح للقوائم السريعة والمستقرة»؟
ساعد Compose على تتبع العناصر أثناء التغييرات تتمرن على Jetpack Compose Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Jetpack Compose Academy؟
لا تُشترط خبرة سابقة. Jetpack Compose Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «مفاتيح للقوائم السريعة والمستقرة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Jetpack Compose Academy هذا؟
نعم. كل درس في Jetpack Compose Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- LazyColumn مقابل Column القابلة للتمرير
- items وitemsIndexed
- مفاتيح للقوائم السريعة والمستقرة
- الترويسات الثابتة وقوائم الأقسام