Android Academy · Leçon

Listes avec LazyColumn

Affichez efficacement des listes déroulantes.

Listes avec LazyColumn est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 4 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 Android Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Android Academy comprend 4 leçons au total.

Pourquoi pas simplement un Column ?

Un Column compose tous ses enfants en une seule fois. Pour une liste longue ou défilante, cela gaspille de la mémoire et ralentit l’interface. Vous avez besoin d’une liste qui ne construit que les éléments visibles.

Voici LazyColumn

LazyColumn est une liste verticale défilante qui ne compose que les éléments actuellement à l’écran, comme l’ancien RecyclerView, mais de façon beaucoup plus simple.

LazyColumn {
    items(messages) { msg ->
        Text(text = msg)
    }
}

La fonction items()

Dans la lambda de LazyColumn, appelez items(list) et fournissez-lui un composable pour chaque élément. Compose l’appelle à la demande lorsque l’utilisateur fait défiler la liste.

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

Ce n’est pas une boucle ordinaire

N’utilisez pas une boucle for classique dans LazyColumn : cela annulerait le fonctionnement différé. Utilisez toujours items() (ou itemsIndexed()) afin que Compose puisse construire les éléments à la demande.

Un seul élément d’en-tête

Utilisez item { } (au singulier) pour ajouter un élément fixe, comme un en-tête, avant les éléments générés par la boucle.

LazyColumn {
    item { Text("Header") }
    items(data) { Text(it) }
}

itemsIndexed

Lorsque vous avez besoin de la position, utilisez itemsIndexed pour obtenir à la fois l’index et l’élément.

LazyColumn {
    itemsIndexed(data) { index, value ->
        Text(text = "$index: $value")
    }
}

Des clés pour la stabilité

Fournissez une key stable pour chaque élément afin que Compose puisse suivre correctement les éléments lorsque la liste change, ce qui améliore les performances et les animations.

items(users, key = { it.id }) { user ->
    Text(user.name)
}

Espacer les éléments

LazyColumn accepte verticalArrangement et contentPadding pour espacer les éléments et ajouter des marges intérieures aux bords de la liste.

LazyColumn(
    verticalArrangement = Arrangement.spacedBy(8.dp),
    contentPadding = PaddingValues(16.dp)
) {
    items(data) { Text(it) }
}

LazyRow

Il existe également LazyRow pour les listes à défilement horizontal : la même API, mais dans une autre direction. C’est idéal pour les carrousels de cartes.

LazyRow {
    items(images) { img ->
        Image(painter = img, contentDescription = null)
    }
}

Défilement intégré

Vous ne devez pas ajouter de modificateur de défilement à un LazyColumn : il défile automatiquement. Ajouter verticalScroll provoquerait un conflit et ferait planter l’application. Les listes différées gèrent elles-mêmes le défilement.

Pour tout assembler

Une liste d’éléments avec un en-tête, des clés et un espacement.

@Composable
fun MessageList(messages: List<Message>) {
    LazyColumn(
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        item { Text("Inbox") }
        items(messages, key = { it.id }) { msg ->
            Text(text = msg.text)
        }
    }
}

Vérification rapide

Quel est le principal avantage de LazyColumn par rapport à un Column défilant ?

Récapitulatif

LazyColumn :

Ne construit que les éléments visibles, ce qui est efficace pour les longues listes.
Utilisez items() / itemsIndexed(), et non une boucle for.
Ajoutez une key pour la stabilité ; utilisez item { } pour les en-têtes.
Le défilement est automatique : aucun modificateur de défilement. LazyRow est la version horizontale.

Questions Fréquemment Posées

La leçon « Listes avec LazyColumn » est-elle gratuite ?

Oui — le texte complet de « Listes avec LazyColumn » 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 Android Academy, passe à CoddyKit PRO. Le cours Android Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Listes avec LazyColumn » ?

Affichez efficacement des listes déroulantes. Tu pratiques Android 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 Android Academy ?

Aucune expérience préalable n'est requise. Android 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 4 sur 4.

Combien de temps prend la leçon « Listes avec LazyColumn » ?

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 Android Academy ?

Oui. Chaque leçon Android 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

← Retour à Android Academy