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

Wat is LazyColumn in Jetpack Compose

LazyColumn is een composable-functie die een verticale scrollbare lijst met lazy loading implementeert. In tegenstelling tot Column, die alle onderliggende elementen in één keer rendert, maakt LazyColumn alleen elementen aan die in het weergavegebied vallen.

Het lazy loading-mechanisme in LazyColumn is gebaseerd op hergebruik van elementen: wanneer een element tijdens het scrollen verborgen raakt, kunnen de compositie en lay-out ervan opnieuw worden gebruikt voor een nieuw weergegeven element. Dit bespaart geheugen en processortijd, vooral bij lange lijsten.

Volgens Android Developers Blog, 2024 kan LazyColumn lijsten van tienduizenden elementen efficiënt verwerken zonder significant prestatieverlies. Elk element in LazyColumn heeft een sleutel (key) die Compose helpt het element te identificeren en de status ervan te behouden bij wijzigingen in de lijst.

Basis handtekening van LazyColumn

LazyColumn accepteert de parameters modifier, state, contentPadding, reverseLayout, verticalArrangement en horizontalAlignment. De inhoud wordt gespecificeerd in een lambda-blok via de DSL-functies items en 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 = "Item $item")
        }
    }
}

Parameters van LazyColumn: items en item

Het DSL-blok van LazyColumn biedt de functies items en item voor het toevoegen van inhoud. items accepteert een gegevenscollectie, een sleutel en een fabrieksfunctie voor het maken van elementen. item voegt een enkel statisch element toe aan de lijst.

itemsIndexed is een variant van items die naast de gegevens ook de index van het element doorgeeft. Dit is handig wanneer de positie van het element nodig is zonder afzonderlijke berekening. items(size) accepteert alleen het aantal elementen en de fabriek zonder koppeling aan een collectie.

De parameter key in items identificeert elk element uniek. Volgens Material Design Guidelines, 2025 verbeteren sleutels de prestaties bij het bijwerken en animeren van elementen, omdat Compose de verplaatsing of wijziging van een specifiek element via de sleutel kan volgen.

Voorbeeld met verschillende elementtypen

De functie items met contentType stelt LazyColumn in staat om het hergebruik van elementen van verschillende typen te optimaliseren. In het onderstaande voorbeeld worden in één lijst sectiekopteksten en gewone rijen gebruikt.

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

LazyListState en scrollbeheer

LazyListState is een statusobject van LazyColumn dat de huidige scrollpositie, het eerste zichtbare element en de offset bijhoudt. Het kan worden gemaakt via rememberLazyListState() en worden doorgegeven aan de parameter state van LazyColumn.

LazyListState biedt de methoden animateScrollToItem en scrollToItem voor programmatisch scrollen naar een specifiek element. animateScrollToItem creëert een vloeiende scrollanimatie, terwijl scrollToItem onmiddellijk scrollt. Beide methoden moeten worden aangeroepen binnen een coroutine in CompositionContext.

Volgens Android Developers, 2024 bevat LazyListState ook layoutInfo, dat informatie geeft over zichtbare elementen — hun indexen, offsets en afmetingen. Dit is nuttig voor het implementeren van analyses, het bijhouden van weergaven of oneindig scrollen.

Voorbeeld met programmatisch scrollen

In dit voorbeeld wordt LazyColumn beheerd via LazyListState. Een knop scrollt de lijst naar het element met index 50 met een vloeiende animatie.

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

    Column {
        Button(
            onClick = {
                scope.launch {
                    listState.animateScrollToItem(50)
                }
            }
        ) {
            Text("Scroll naar 50")
        }

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

Prestatie-optimalisatie van LazyColumn

De belangrijkste factor voor de prestaties van LazyColumn is het correct gebruiken van sleutels. Elk element moet een unieke stabiele sleutel hebben via de parameter key. Zonder sleutels kan Compose elementen niet correct hergebruiken bij gegevenswijzigingen, wat leidt tot recompositie.

contentType informeert LazyColumn welke elementen hetzelfde lay-outtype hebben. Wanneer twee elementen met dezelfde contentType in het verwerkingsgebied komen, kan LazyColumn hun lay-out hergebruiken zonder recompositie. Volgens Android Developers Blog, 2024 verbetert contentType de prestaties met 30–50% in lijsten met verschillende elementtypen.

Voor LazyColumn is het ook belangrijk om instabiele parameters in fabrieksfuncties te vermijden. Elke keer dat een parameter van een element verandert, recomposeert Compose dat element. Het gebruik van remember en derivedStateOf voor stabiele waarden vermindert het aantal recomposities.

Tabel met prestatie factoren

Sticky headers en secties in LazyColumn

stickyHeader is een DSL-functie van LazyColumn die de sectiekoptekst aan de bovenkant van de lijst vastzet tijdens het scrollen. Wanneer de volgende sectie de bovenkant bereikt, vervangt de koptekst de huidige. Dit gedrag is gebruikers bekend van contactlijsten en kalenders.

stickyHeader accepteert een sleutel en een fabrieksfunctie, vergelijkbaar met item. In tegenstelling tot een gewoon item blijft stickyHeader zichtbaar tijdens het scrollen van de inhoud van de sectie. Wanneer de sectie volledig is gescrolld, verdringt de koptekst van de volgende sectie de vorige.

Volgens Material Design Guidelines, 2025 verbetert sticky header de navigatie in lange lijsten en vermindert het de cognitieve belasting van de gebruiker. Voor het implementeren van sticky header volstaat het om de sectiekoptekst op de juiste positie ten opzichte van items-elementen in stickyHeader te wikkelen.

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