Comment créer un RecyclerView dans Jetpack Compose…

Dans Jetpack Compose, il n'existe pas de RecyclerView au sens traditionnel. Pour afficher des listes, on utilise LazyColumn (pour des listes verticales) et LazyRow (pour des listes horizontales). Ils offrent une efficacité similaire grâce à la réutilisation des éléments.

Exemple d'utilisation de LazyColumn:

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

@Composable
fun SimpleList(itemsList: List<String>) {
    LazyColumn {
        items(itemsList) { item ->
            Text(text = item)
        }
    }
}

Analyse:

LazyColumn : Fonction composable qui affiche les éléments dans une liste verticale, en les créant au besoin.
items(itemsList) { item -> ... } : Extension pour LazyListScope permettant d'itérer sur la liste de données (itemsList) et pour chaque élément (item) d'appeler le lambda Composable fourni. Ce bloc définit l'apparence de chaque élément de la liste.
Text(text = item) : Fonction composable simple qui affiche le texte de l'élément actuel.

Caractéristiques principales de LazyColumn/LazyRow:

Efficacité : Les éléments sont créés et composés uniquement lorsqu'ils deviennent visibles à l'écran ou proches du bord. Cela réduit la consommation de mémoire et améliore la performance pour de grandes listes.
Simplicité : API simplifiée par rapport à RecyclerView, sans besoin de créer un adaptateur, un ViewHolder ou de gérer le cycle de vie de ces composants.
Intégration complète : S'intègre parfaitement avec d'autres fonctions Compose.

On peut utiliser itemsIndexed pour accéder à l'indice de chaque élément:

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

@Composable
fun IndexedList(itemsList: List<String>) {
    LazyColumn {
        itemsIndexed(itemsList) { index, item ->
            Text(text = "Item à l'indice $index : $item")
        }
    }
}

Pour des comportements plus complexes (par exemple, différents types de vues), on peut utiliser la surcharge de items ou item:

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

sealed class ListItem {
    data class TextItem(val content: String) : ListItem()
    data class ImageItem(val url: String) : ListItem()
}

@Composable
fun MixedList(itemsList: List<ListItem>) {
    LazyColumn {
        items(itemsList) { item ->
            when (item) {
                is ListItem.TextItem -> Text(text = item.content)
                is ListItem.ImageItem -> {
                    // Ici, vous pouvez afficher une image, par exemple avec la fonction Image
                    Text(text = "Image : ${item.url}") // Marqueur de position
                }
            }
        }
    }
}

Comment créer un RecyclerView dans Jetpack Compose?