LazyColumn dans Jetpack Compose — ce que c’est, propriétés et fonctionnement

Qu’est-ce que LazyColumn dans Jetpack Compose

LazyColumn est une fonction composable qui implémente une liste verticale défilable avec chargement différé. Contrairement à Column qui rend tous les enfants à la fois, LazyColumn crée uniquement les éléments qui se trouvent dans la zone d’affichage.

Le mécanisme de chargement différé dans LazyColumn est basé sur la réutilisation des éléments : lorsqu’un élément est masqué lors du défilement, sa composition et sa mise en page peuvent être réutilisées pour un nouvel élément affiché. Cela économise de la mémoire et du temps CPU, en particulier sur les longues listes.

Selon Android Developers Blog, 2024, LazyColumn peut gérer efficacement des listes de dizaines de milliers d’éléments sans dégradation significative des performances. Chaque élément dans LazyColumn possède une clé (key) qui aide Compose à identifier et à préserver l’état de l’élément lorsque la liste change.

Signature de base de LazyColumn

LazyColumn accepte les paramètres modifier, state, contentPadding, reverseLayout, verticalArrangement et horizontalAlignment. Le contenu est défini dans un bloc lambda via les fonctions DSL items et item.

@Composable
fun SimpleLazyColumn() {
    val itemsList = (1..100).toList()
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        contentPadding = PaddingValues(16.dp)
    ) {
        items(itemsList) { item ->
            Text(text = "Élément $item")
        }
    }
}

Paramètres de LazyColumn : items et item

Le bloc DSL de LazyColumn fournit les fonctions items et item pour ajouter du contenu. items accepte une collection de données, une clé et une fonction d’usine pour créer des éléments. item ajoute un élément statique unique à la liste.

itemsIndexed est une variante de items qui transmet l’index de l’élément en plus des données. C’est utile lorsque vous avez besoin de connaître la position de l’élément sans calcul séparé. items(size) accepte uniquement le nombre d’éléments et une fonction d’usine sans liaison à une collection.

Le paramètre key dans items identifie de manière unique chaque élément. Selon les Material Design Guidelines, 2025, les clés améliorent les performances lors de la mise à jour et de l’animation des éléments, car Compose peut suivre le déplacement ou la modification d’un élément spécifique par sa clé.

Exemple avec différents types d’éléments

La fonction items avec contentType permet à LazyColumn d’optimiser la réutilisation des éléments de différents types. Dans l’exemple ci-dessous, des en-têtes de section et des lignes régulières sont utilisés dans une seule liste.

@Composable
fun MixedItemsList() {
    LazyColumn {
        item {
            Text(
                text = "En-tête",
                style = MaterialTheme.typography.headlineMedium
            )
        }
        items(
            items = (1..20).toList(),
            key = { it },
            contentType = { "item" }
        ) { item ->
            Text(text = "Ligne $item")
        }
    }
}

LazyListState et gestion du défilement

LazyListState est un objet d’état de LazyColumn qui suit la position actuelle de défilement, le premier élément visible et le décalage. Il peut être créé via rememberLazyListState() et transmis au paramètre state de LazyColumn.

LazyListState fournit les méthodes animateScrollToItem et scrollToItem pour le défilement programmatique vers un élément spécifique. animateScrollToItem crée une animation de défilement fluide, tandis que scrollToItem défile instantanément. Les deux méthodes nécessitent un appel dans une coroutine au sein de CompositionContext.

Selon Android Developers, 2024, LazyListState contient également layoutInfo, qui fournit des informations sur les éléments visibles — leurs indices, décalages et tailles. Cela est utile pour implémenter des analyses, le suivi des vues ou le défilement infini.

Exemple avec défilement programmatique

Dans cet exemple, LazyColumn est contrôlé via LazyListState. Un bouton fait défiler la liste jusqu’à l’élément d’index 50 avec une animation fluide.

@Composable
fun ScrollableList() {
    val listState = rememberLazyListState()
    val scope = rememberCoroutineScope()

    Column {
        Button(
            onClick = {
                scope.launch {
                    listState.animateScrollToItem(50)
                }
            }
        ) {
            Text("Défiler jusqu’à 50")
        }

        LazyColumn(state = listState) {
            items((1..100).toList()) { item ->
                Text(
                    text = "Élément $item",
                    modifier = Modifier.padding(8.dp)
                )
            }
        }
    }
}

Optimisation des performances de LazyColumn

Le facteur clé de performance de LazyColumn est l’utilisation correcte des clés. Chaque élément doit avoir une clé stable unique via le paramètre key. Sans clés, Compose ne peut pas réutiliser correctement les éléments lorsque les données changent, ce qui entraîne une recomposition.

contentType indique à LazyColumn quels éléments ont le même type de mise en page. Lorsque deux éléments avec le même contentType entrent dans le pool de recyclage, LazyColumn peut réutiliser leur mise en page sans recomposition. Selon Android Developers Blog, 2024, contentType améliore les performances de 30 à 50 % dans les listes avec différents types d’éléments.

Pour LazyColumn, il est également important d’éviter les paramètres instables dans les fonctions d’usine. Chaque fois qu’un paramètre d’élément change, Compose recompose cet élément. L’utilisation de remember et derivedStateOf pour des valeurs stables réduit le nombre de recompositions.

Tableau des facteurs de performance

Sticky headers et sections dans LazyColumn

stickyHeader est une fonction DSL de LazyColumn qui fixe un en-tête de section en haut de la liste lors du défilement. Lorsque la section suivante atteint le haut, son en-tête remplace l’en-tête actuel. Ce comportement est familier aux utilisateurs de listes de contacts et de calendriers.

stickyHeader accepte une clé et une fonction d’usine, similaire à item. Contrairement à un item normal, stickyHeader reste visible lors du défilement du contenu de sa section. Lorsqu’une section est entièrement défilée, l’en-tête de la section suivante pousse le précédent vers l’extérieur.

Selon les Material Design Guidelines, 2025, les sticky headers améliorent la navigation dans les longues listes et réduisent la charge cognitive de l’utilisateur. Pour implémenter un sticky header, il suffit d’envelopper un en-tête de section dans stickyHeader à la position correcte par rapport aux éléments items.

@Composable
fun SectionedList(sections: Map<String, List<String>>) {
    LazyColumn {
        sections.forEach { (header, items) ->
            stickyHeader {
                Text(
                    text = header,
                    modifier = Modifier.background(Color.White)
                        .padding(16.dp)
                )
            }
            items(items) { item ->
                Text(text = item, modifier = Modifier.padding(8.dp))
            }
        }
    }
}