0Pricing
Jetpack Compose Academy · Leçon

items et itemsIndexed

Affichez une collection de lignes de données.

items et itemsIndexed est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Jetpack Compose Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Jetpack Compose Academy comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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. 🎯

Questions Fréquemment Posées

La leçon « items et itemsIndexed » est-elle gratuite ?

Oui — le texte complet de « items et itemsIndexed » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Jetpack Compose Academy, passe à CoddyKit PRO. Le cours Jetpack Compose Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « items et itemsIndexed » ?

Affichez une collection de lignes de données. Tu pratiques Jetpack Compose Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Jetpack Compose Academy ?

Aucune expérience préalable n'est requise. Jetpack Compose Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « items et itemsIndexed » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Jetpack Compose Academy ?

Oui. Chaque leçon Jetpack Compose Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. LazyColumn ou colonne déroulable
  2. items et itemsIndexed
  3. Clés pour des listes stables et rapides
  4. En-têtes persistants et listes par sections
← Retour à Jetpack Compose Academy