LazyRow dans Jetpack Compose — ce que c'est, propriétés et fonctionnement

Qu'est-ce que LazyRow dans Jetpack Compose

LazyRow — est une fonction compostable implémentant une liste horizontale défilable avec chargement différé des éléments. Contrairement à Row qui rend tous les éléments enfants simultanément, LazyRow crée uniquement les éléments visibles dans la zone d'affichage.

LazyRow fonctionne sur le même principe que LazyColumn, mais dispose les éléments horizontalement. En défilant vers la gauche ou la droite, les éléments qui sortent de la zone d'affichage sont réutilisés pour afficher de nouveaux éléments. Ceci est crucial pour les galeries avec de nombreuses images ou les longues listes de catégories.

Selon Android Developers Blog, 2024, LazyRow utilise la même architecture LazyList que LazyColumn, incluant LazyListState, le mécanisme de réutilisation via Pool et la prise en charge de différents types d'éléments. L'efficacité maximale est atteinte avec une hauteur fixe des éléments.

Signature de base de LazyRow

LazyRow accepte les paramètres modifier, state, contentPadding, reverseLayout, horizontalArrangement et verticalAlignment. Le contenu est défini via les fonctions DSL items et item, similaire à LazyColumn.

@Composable
fun SimpleLazyRow() {
    val items = (1..50).toList()
    LazyRow(
        modifier = Modifier.fillMaxWidth().height(100.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        contentPadding = PaddingValues(start = 16.dp, end = 16.dp)
    ) {
        items(items) { item ->
            Box(
                modifier = Modifier.size(80.dp).background(Color.Gray)
            ) {
                Text(text = "$item", modifier = Modifier.align(Alignment.Center))
            }
        }
    }
}

Propriétés de LazyRow: horizontalArrangement et contentPadding

horizontalArrangement gère la distribution des éléments le long de l'axe horizontal dans LazyRow. Les mêmes valeurs Arrangement que dans Row sont disponibles: Start, Center, End, SpaceBetween, SpaceEvenly, SpaceAround et spacedBy avec espacement personnalisé.

contentPadding ajoute du remplissage sur les bords du conteneur LazyRow. Contrairement à Modifier.padding, contentPadding est pris en compte lors du défilement: le premier élément aura un remplissage depuis le bord gauche, le dernier depuis le bord droit. Selon Material Design Guidelines, 2025, contentPadding est obligatoire pour les carrousels et galeries afin que le premier et le dernier élément ne collent pas au bord de l'écran.

verticalAlignment aligne les éléments verticalement dans LazyRow. Par défaut, Alignment.Top est utilisé. Pour centrer des éléments de différentes hauteurs, utilisez Alignment.CenterVertically, ce qui est utile pour les carrousels avec des images de différents ratios.

Tableau des paramètres de LazyRow

Gestion du défilement horizontal avec LazyListState

LazyListState pour LazyRow fonctionne identiquement à LazyColumn: il suit le premier élément visible, le décalage et la position générale de défilement. L'état est créé via rememberLazyListState() et passé au paramètre state.

Le contrôle programmatique du défilement de LazyRow se fait avec les mêmes méthodes: animateScrollToItem pour une animation fluide et scrollToItem pour un défilement instantané. Les deux sont appelés dans une coroutine. Ceci est utile pour les carrousels avec des boutons de navigation ou pour le défilement automatique.

Selon Android Developers, 2024, LazyRow prend également en charge SnapFlingBehavior — un comportement de défilement rapide qui s'arrête sur l'élément le plus proche plutôt qu'entre les éléments. Cela crée un effet d'accrochage familier pour les carrousels et galeries.

@Composable
fun CarouselWithSnap() {
    val listState = rememberLazyListState()
    val scope = rememberCoroutineScope()
    val items = listOf("A", "B", "C", "D", "E")

    Column {
        LazyRow(
            state = listState,
            flingBehavior = SnapFlingBehavior(listState),
            horizontalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(items) { item ->
                Card(modifier = Modifier.width(150.dp)) {
                    Text(text = item, modifier = Modifier.padding(16.dp))
                }
            }
        }

        Row(modifier = Modifier.fillMaxWidth()) {
            Button(onClick = {
                scope.launch {
                    listState.animateScrollToItem(0)
                }
            }) { Text("Pour commencer") }
        }
    }
}

Exemples d'utilisation de LazyRow dans les interfaces

Le premier exemple — LazyRow pour une galerie d'images avec aperçus. Chaque élément est une Box avec une image et une légende. LazyRow gère efficacement des dizaines et des centaines d'images, ne chargeant que les visibles.

@Composable
fun ImageGallery(images: List<String>) {
    LazyRow(
        contentPadding = PaddingValues(start = 16.dp, end = 16.dp),
        horizontalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        items(images, key = { it }) { url ->
            AsyncImage(
                model = url,
                contentDescription = "Image",
                modifier = Modifier.size(120.dp)
            )
        }
    }
}

Le deuxième exemple — LazyRow pour une liste de catégories avec icônes. Les catégories sont affichées sous forme de chips et l'utilisateur peut les faire défiler horizontalement. LazyRow avec spacedBy et contentPadding crée un espacement entre les catégories et sur les bords.

@Composable
fun CategoryChips(categories: List<String>) {
    LazyRow(
        contentPadding = PaddingValues(horizontal = 16.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(categories, key = { it }) { category ->
            AssistChip(
                onClick = {},
                label = { Text(category) }
            )
        }
    }
}

LazyRow vs Row: quand choisir lequel

Le choix entre LazyRow et Row dépend du nombre d'éléments. Row convient pour 5–10 éléments toujours visibles à l'écran. LazyRow est essentiel lorsqu'il y a beaucoup d'éléments ou que leur nombre est dynamique.

Row rend tous les éléments à la fois, ce qui cause des ralentissements avec un grand nombre d'éléments. LazyRow ne rend que les visibles, ce qui le rend préférable pour les listes défilables. Selon Android Developers Blog, 2024, le seuil est d'environ 10 éléments: s'il y a plus d'éléments, utilisez LazyRow.

LazyRow prend également en charge les animations, SnapFlingBehavior et le regroupement via des séparateurs, ce qui le rend plus flexible pour les interfaces complexes. Row est plus simple et ne nécessite pas LazyListState, mais n'est pas optimisé pour les longues listes.

• Row — pour 5–10 éléments statiques sans défilement
• LazyRow — pour 10+ éléments avec défilement horizontal
• LazyRow — pour carrousels, galeries, listes dynamiques