LazyRow in Jetpack Compose — wat is het, eigenschappen en hoe het werkt

Wat is LazyRow in Jetpack Compose

LazyRow — is een composable-functie die een horizontale scrollbare lijst met luie loading van elementen implementeert. In tegenstelling tot Row, die alle onderliggende elementen tegelijkertijd rendert, maakt LazyRow alleen elementen aan die zichtbaar zijn in het weergavegebied.

LazyRow werkt volgens hetzelfde principe als LazyColumn, maar plaatst elementen horizontaal. Bij het scrollen naar links of rechts worden elementen die uit het zicht zijn geraakt, hergebruikt voor het weergeven van nieuwe. Dit is cruciaal voor galerijen met veel afbeeldingen of lange categorielijsten.

Volgens Android Developers Blog, 2024 gebruikt LazyRow dezelfde LazyList-architectuur als LazyColumn, inclusief LazyListState, het hergebruikmechanisme via Pool en ondersteuning voor verschillende elementtypen. Maximale efficiëntie wordt bereikt met een vaste elementhoogte.

Basis signature van LazyRow

LazyRow accepteert de parameters modifier, state, contentPadding, reverseLayout, horizontalArrangement en verticalAlignment. De inhoud wordt gedefinieerd via DSL-functies items en item, vergelijkbaar met 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))
            }
        }
    }
}

Eigenschappen van LazyRow: horizontalArrangement en contentPadding

horizontalArrangement beheert de verdeling van elementen langs de horizontale as binnen LazyRow. Dezelfde Arrangement-waarden als in Row zijn beschikbaar: Start, Center, End, SpaceBetween, SpaceEvenly, SpaceAround en spacedBy met aangepaste tussenruimte.

contentPadding voegt marges toe aan de randen van de LazyRow-container. In tegenstelling tot Modifier.padding wordt contentPadding meegenomen bij scrollen: het eerste element heeft marge van de linkerrand, het laatste van de rechterrand. Volgens Material Design Guidelines, 2025 is contentPadding verplicht voor carrousels en galerijen, zodat het eerste en laatste element niet aan de rand van het scherm plakken.

verticalAlignment lijnt elementen verticaal uit binnen LazyRow. Standaard wordt Alignment.Top gebruikt. Voor het centreren van elementen met verschillende hoogtes gebruik Alignment.CenterVertically, handig voor carrousels met afbeeldingen van verschillende verhoudingen.

Tabel met LazyRow-parameters

Horizontaal scrollen beheren met LazyListState

LazyListState voor LazyRow werkt identiek aan LazyColumn: het volgt het eerste zichtbare element, de offset en de algemene scrollpositie. De status wordt gemaakt via rememberLazyListState() en doorgegeven in de parameter state.

Programmatische controle van LazyRow-scrollen gebeurt met dezelfde methoden: animateScrollToItem voor vloeiende animatie en scrollToItem voor direct scrollen. Beide worden aangeroepen binnen een coroutine. Dit is handig voor carrousels met "Links/Rechts"-knoppen of voor automatisch scrollen.

Volgens Android Developers, 2024 ondersteunt LazyRow ook SnapFlingBehavior — gedrag bij snel scrollen dat stopt op het dichtstbijzijnde element in plaats van tussen elementen. Dit creëert een "plak"-effect aan het element, bekend van carrousels en galerijen.

@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("Om te beginnen") }
        }
    }
}

Voorbeelden van LazyRow-gebruik in interfaces

Eerste voorbeeld — LazyRow voor een afbeeldingsgalerij met voorbeelden. Elk element is een Box met een afbeelding en bijschrift. LazyRow verwerkt tientallen en honderden afbeeldingen efficiënt door alleen zichtbare te laden.

@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)
            )
        }
    }
}

Tweede voorbeeld — LazyRow voor een categorielijst met pictogrammen. Categorieën worden weergegeven als chips en de gebruiker kan ze horizontaal scrollen. LazyRow met spacedBy en contentPadding creëert tussenruimtes tussen categorieën en aan de randen.

@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 versus Row: wanneer wat te kiezen

De keuze tussen LazyRow en Row hangt af van het aantal elementen. Row is geschikt voor 5–10 elementen die altijd zichtbaar zijn op het scherm. LazyRow is verplicht wanneer er veel elementen zijn of het aantal dynamisch is.

Row rendert alle elementen tegelijk, wat leidt tot vertragingen bij een groot aantal elementen. LazyRow rendert alleen zichtbare elementen, wat het de voorkeur geeft voor lijsten met scrollen. Volgens Android Developers Blog, 2024 is de overgangsdrempel ongeveer 10 elementen: als er meer zijn, gebruik dan LazyRow.

LazyRow ondersteunt ook animaties, SnapFlingBehavior en groepering via scheidingstekens, wat het flexibeler maakt voor complexe interfaces. Row is eenvoudiger en heeft geen LazyListState nodig, maar is niet geoptimaliseerd voor lange lijsten.

• Row — voor 5–10 statische elementen zonder scrollen
• LazyRow — voor 10+ elementen met horizontaal scrollen
• LazyRow — voor carrousels, galerijen, dynamische lijsten