LazyColumn i Jetpack Compose — vad det är, egenskaper och hur det fungerar

Vad är LazyColumn i Jetpack Compose

LazyColumn är en composable-funktion som implementerar en vertikal scrollbar lista med lat laddning. Till skillnad från Column, som renderar alla underordnade element på en gång, skapar LazyColumn bara element som kommer in i visningsområdet.

Mekanismen för lat laddning i LazyColumn bygger på återanvändning av element: när ett element döljs vid scrollning kan dess komposition och layout återanvändas för ett nytt visat element. Detta sparar minne och processortid, särskilt på långa listor.

Enligt Android Developers Blog, 2024 kan LazyColumn effektivt bearbeta listor med tiotusentals element utan betydande prestandaförlust. Varje element i LazyColumn har en nyckel (key) som hjälper Compose att identifiera och bevara elementets tillstånd vid liständringar.

Grundläggande signatur för LazyColumn

LazyColumn tar emot parametrarna modifier, state, contentPadding, reverseLayout, verticalArrangement och horizontalAlignment. Innehållet specificeras i ett lambda-block via DSL-funktionerna items och 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 = "Objekt $item")
        }
    }
}

Parametrar för LazyColumn: items och item

DSL-blocket för LazyColumn tillhandahåller funktionerna items och item för att lägga till innehåll. items tar emot en datainsamling, en nyckel och en fabriksfunktion för att skapa element. item lägger till ett enskilt statiskt element i listan.

itemsIndexed är en variant av items som förutom data även överför elementets index. Detta är användbart när elementets position behövs utan separat beräkning. items(size) tar bara emot antalet element och fabriken utan koppling till en samling.

Parametern key i items identifierar varje element unikt. Enligt Material Design Guidelines, 2025 förbättrar nycklar prestandan vid uppdatering och animering av element, eftersom Compose kan spåra förflyttning eller ändring av ett specifikt element via nyckeln.

Exempel med olika elementtyper

Funktionen items med contentType gör det möjligt för LazyColumn att optimera återanvändning av element av olika typer. I exemplet nedan används sektionsrubriker och vanliga rader i en lista.

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

LazyListState och scrollhantering

LazyListState är ett tillståndsobjekt för LazyColumn som spårar aktuell scrollposition, första synliga element och förskjutning. Det kan skapas via rememberLazyListState() och skickas till parametern state för LazyColumn.

LazyListState tillhandahåller metoderna animateScrollToItem och scrollToItem för programmeringsscrollning till ett specifikt element. animateScrollToItem skapar en mjuk scrollningsanimation, medan scrollToItem scrollar omedelbart. Båda metoderna kräver anrop inom en korutin i CompositionContext.

Enligt Android Developers, 2024 innehåller LazyListState också layoutInfo, som ger information om synliga element — deras index, förskjutningar och storlekar. Detta är användbart för att implementera analys, spårning av visningar eller oändlig scrollning.

Exempel med programmeringsscrollning

I detta exempel styrs LazyColumn via LazyListState. En knapp scrollar listan till elementet med index 50 med en mjuk animation.

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

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

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

Prestandaoptimering av LazyColumn

Nyckelfaktorn för prestanda i LazyColumn är korrekt användning av nycklar. Varje element bör ha en unik stabil nyckel via parametern key. Utan nycklar kan Compose inte återanvända element korrekt vid dataändringar, vilket leder till omkomposition.

contentType informerar LazyColumn om vilka element som har samma layouttyp. När två element med samma contentType kommer in i bearbetningsområdet kan LazyColumn återanvända deras layout utan omkomposition. Enligt Android Developers Blog, 2024 förbättrar contentType prestandan med 30–50% i listor med olika elementtyper.

För LazyColumn är det också viktigt att undvika instabila parametrar i fabriksfunktioner. Varje gång en parameters för ett element ändras, omkomponerar Compose det elementet. Användning av remember och derivedStateOf för stabila värden minskar antalet omkompositioner.

Tabell över prestandafaktorer

Sticky headers och sektioner i LazyColumn

stickyHeader är en DSL-funktion för LazyColumn som fäster sektionsrubriken överst i listan vid scrollning. När nästa sektion når toppen ersätter dess rubrik den aktuella. Detta beteende är bekant för användare från kontaktlistor och kalendrar.

stickyHeader tar emot en nyckel och en fabriksfunktion, liknande item. Till skillnad från ett vanligt item förblir stickyHeader synligt vid scrollning av innehållet i sin sektion. När sektionen är helt scrollad trycker rubriken från nästa sektion undan den föregående.

Enligt Material Design Guidelines, 2025 förbättrar sticky header navigeringen i långa listor och minskar användarens kognitiva belastning. För att implementera sticky header räcker det att linda in sektionsrubriken i stickyHeader på rätt position i förhållande till items-element.

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