Jetpack Compose Academy · درس

‏items وitemsIndexed

اعرض مجموعة من صفوف البيانات

‏items وitemsIndexed درس مجاني في Jetpack Compose Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Jetpack Compose Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

From Data to Rows

Your data usually lives in a list, like a List of strings or objects. The items block turns each element into a row on screen.

The items Function

Call items with your collection and a lambda. Compose runs the lambda for each element it needs to show.

LazyColumn {
    items(fruits) { fruit ->
        Text(fruit)
    }
}

The Element Parameter

The lambda receives one element at a time. Name it clearly, like fruit or user, then build UI from that single value.

items(users) { user ->
    Text(user.name)
}

Build a Whole Row

The lambda can hold any layout, not just Text. Wrap several composables in a Row to make a richer list item.

items(users) { user ->
    Row { Text(user.name); Text(user.age.toString()) }
}

When You Need the Position

Sometimes you want the row's index, like showing a rank number or alternating colors. Plain items doesn't give you that.

Meet itemsIndexed

Use itemsIndexed when you need the position. Its lambda receives both the index and the element together.

itemsIndexed(songs) { index, song ->
    Text("$index: $song")
}

Index Comes First

Order matters: in itemsIndexed the index is the first parameter and the element is the second. Swapping them is a common slip.

itemsIndexed(tasks) { i, task ->
    Text("Step ${i + 1}: $task")
}

Numbering Made Easy

Index starts at zero, so add one for human-friendly numbering. This makes ranked or step-by-step lists feel natural.

Add a Single Fixed Row

Need one standalone row, like a header or footer? Use item (singular) for a single piece of content among your items blocks.

LazyColumn {
    item { Text("My List") }
    items(data) { Text(it) }
}

Mix and Match Freely

Inside one LazyColumn you can combine several item and items calls. They render in the order you declare them.

Pick the Right Tool

Reach for items when the element is enough, and itemsIndexed when you also need each row's position. That's the whole choice.

Quick Check

Pick the right builder for the job.

Recap: items and itemsIndexed

Use items to map data to rows, itemsIndexed when you need the position, and item for a single fixed row. Mix them freely. 🎯

الأسئلة الشائعة

هل درس «‏items وitemsIndexed» مجاني؟

نعم — نص درس «‏items وitemsIndexed» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Jetpack Compose Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.

ماذا ستتعلم في «‏items وitemsIndexed»؟

اعرض مجموعة من صفوف البيانات تتمرن على Jetpack Compose Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Jetpack Compose Academy؟

لا تُشترط خبرة سابقة. Jetpack Compose Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «‏items وitemsIndexed»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Jetpack Compose Academy هذا؟

نعم. كل درس في Jetpack Compose Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Jetpack Compose Academy