LazyColumn a Jetpack Compose-ban — mi ez, tulajdonságai és hogyan működik

Mi az a LazyColumn a Jetpack Compose-ban

LazyColumn egy composable függvény, amely egy függőlegesen görgethető listát valósít meg lusta betöltéssel. A Column-tól eltérően, amely az összes gyermekelemet egyszerre rendereli, a LazyColumn csak a nézeti területre kerülő elemeket hozza létre.

A lusta betöltés mechanizmusa a LazyColumn-ban az elemek újrafelhasználásán alapul: amikor egy elem elrejtőzik görgetés közben, annak kompozíciója és elrendezése újra felhasználható egy új megjelenő elem számára. Ez memóriát és processzoridőt takarít meg, különösen hosszú listákon.

A Android Developers Blog, 2024 szerint a LazyColumn hatékonyan képes feldolgozni tízezres elemszámú listákat jelentős teljesítménycsökkenés nélkül. A LazyColumn minden eleme rendelkezik egy kulccsal (key), amely segíti a Compose-t az elem azonosításában és állapotának megőrzésében a lista változásai során.

A LazyColumn alap szignatúrája

LazyColumn elfogadja a modifier, state, contentPadding, reverseLayout, verticalArrangement és horizontalAlignment paramétereket. A tartalom lambda blokkban kerül meghatározásra a DSL items és item függvényein keresztül.

@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 = "Elem: $item")
        }
    }
}

A LazyColumn paraméterei: items és item

A LazyColumn DSL blokkja az items és item függvényeket biztosítja a tartalom hozzáadásához. Az items egy adatgyűjteményt, kulcsot és gyárfüggvényt fogad az elemek létrehozásához. Az item egyetlen statikus elemet ad a listához.

itemsIndexed az items egy változata, amely az adatok mellett az elem indexét is továbbítja. Ez akkor hasznos, ha az elem pozíciója szükséges külön számítás nélkül. items(size) csak az elemek számát és a gyárat fogadja el gyűjteményhez való kapcsolódás nélkül.

A key paraméter az items-ben egyedileg azonosítja az egyes elemeket. A Material Design Guidelines, 2025 szerint a kulcsok javítják a teljesítményt az elemek frissítése és animálása során, mivel a Compose nyomon követheti egy adott elem mozgását vagy változását a kulcs segítségével.

Példa különböző elemtípusokkal

Az items függvény contentType-tal lehetővé teszi a LazyColumn számára a különböző típusú elemek újrafelhasználásának optimalizálását. Az alábbi példában egy listában szakaszfejlécek és hétköznapi sorok vannak használva.

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

LazyListState és görgetéskezelés

LazyListState a LazyColumn állapotobjektuma, amely nyomon követi a jelenlegi görgetési pozíciót, az első látható elemet és az eltolást. Létrehozható a rememberLazyListState() segítségével és átadható a LazyColumn state paraméterének.

LazyListState biztosítja az animateScrollToItem és scrollToItem metódusokat egy adott elemhez történő programozott görgetéshez. Az animateScrollToItem sima görgetési animációt hoz létre, míg a scrollToItem azonnal görget. Mindkét metódus meghívása egy korutinban szükséges a CompositionContext-on belül.

A Android Developers, 2024 szerint a LazyListState tartalmazza a layoutInfo-t is, amely információt nyújt a látható elemekről — azok indexeiről, eltolásairól és méreteiről. Ez hasznos analitika, megtekintések nyomon követése vagy végtelen görgetés megvalósításához.

Példa programozott görgetéssel

Ebben a példában a LazyColumn a LazyListState-en keresztül van vezérelve. Egy gomb sima animációval görgeti a listát az 50-es indexű elemhez.

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

    Column {
        Button(
            onClick = {
                scope.launch {
                    listState.animateScrollToItem(50)
                }
            }
        ) {
            Text("Görgetés 50-re")
        }

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

A LazyColumn teljesítményének optimalizálása

A LazyColumn teljesítményének kulcstényezője a kulcsok helyes használata. Minden elemnek egyedi stabil kulccsal kell rendelkeznie a key paraméteren keresztül. Kulcsok nélkül a Compose nem tudja megfelelően újrafelhasználni az elemeket adatváltozás esetén, ami újrakomponáláshoz vezet.

contentType tájékoztatja a LazyColumn-t arról, hogy mely elemek rendelkeznek azonos elrendezési típussal. Amikor két azonos contentType-tel rendelkező elem a feldolgozási területre kerül, a LazyColumn újrafelhasználhatja az elrendezésüket újrakomponálás nélkül. A Android Developers Blog, 2024 szerint a contentType 30–50%-kal javítja a teljesítményt különböző elemtípusokat tartalmazó listákban.

A LazyColumn esetében fontos az instabil paraméterek kerülése is a gyárfüggvényekben. Minden alkalommal, amikor egy elem paramétere megváltozik, a Compose újrakomponálja az adott elemet. A remember és derivedStateOf használata stabil értékek esetén csökkenti az újrakomponálások számát.

Teljesítménytényezők táblázata

Sticky headerek és szakaszok a LazyColumn-ban

stickyHeader egy LazyColumn DSL függvény, amely rögzíti a szakaszfejlécet a lista tetején görgetés közben. Amikor a következő szakasz eléri a tetejét, annak fejléce felváltja a jelenlegit. Ez a viselkedés ismerős a felhasználók számára a névjegyzékekből és naptárakból.

stickyHeader kulcsot és gyárfüggvényt fogad, hasonlóan az item-hez. A hétköznapi item-től eltérően a stickyHeader látható marad a szakasza tartalmának görgetése közben. Amikor a szakasz teljesen elgörgetődik, a következő szakasz fejléce kitolja az előzőt.

A Material Design Guidelines, 2025 szerint a sticky header javítja a navigációt hosszú listákban és csökkenti a felhasználó kognitív terhelését. A sticky header megvalósításához elegendő a szakaszfejlécet a stickyHeader-be csomagolni a megfelelő pozícióban az items elemekhez képest.

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