LazyColumn sa Jetpack Compose — ano ito, mga katangian at kung paano ito gumagana

Ano ang LazyColumn sa Jetpack Compose

LazyColumn ay isang composable function na nagpapatupad ng vertical na nai-scroll na listahan na may lazy loading. Hindi tulad ng Column na nagre-render ng lahat ng child element nang sabay-sabay, ang LazyColumn ay lumilikha lamang ng mga elementong pumapasok sa viewing area.

Ang mekanismo ng lazy loading sa LazyColumn ay batay sa muling paggamit ng mga elemento: kapag ang isang elemento ay nakatago habang nag-i-scroll, ang komposisyon at layout nito ay maaaring magamit muli para sa isang bagong ipinapakitang elemento. Ito ay nakakatipid ng memorya at oras ng processor, lalo na sa mahabang listahan.

Ayon sa Android Developers Blog, 2024, ang LazyColumn ay maaaring mahusay na magproseso ng mga listahan ng sampu-sampung libong elemento nang walang makabuluhang pagbaba ng pagganap. Ang bawat elemento sa LazyColumn ay may susi (key) na tumutulong sa Compose na kilalanin at mapanatili ang estado ng elemento kapag nagbago ang listahan.

Pangunahing lagda ng LazyColumn

LazyColumn ay tumatanggap ng mga parameter na modifier, state, contentPadding, reverseLayout, verticalArrangement at horizontalAlignment. Ang nilalaman ay tinukoy sa lambda block sa pamamagitan ng DSL function na items at 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")
        }
    }
}

Mga Parameter ng LazyColumn: items at item

Ang DSL block ng LazyColumn ay nagbibigay ng mga function na items at item para sa pagdaragdag ng nilalaman. Ang items ay tumatanggap ng koleksyon ng data, susi at factory function para sa paggawa ng mga elemento. Ang item ay nagdaragdag ng isang static na elemento sa listahan.

itemsIndexed ay isang variant ng items na nagpapasa ng index ng elemento bilang karagdagan sa data. Ito ay kapaki-pakinabang kapag kailangan ang posisyon ng elemento nang walang hiwalay na pagkalkula. items(size) ay tumatanggap lamang ng bilang ng mga elemento at factory nang walang koneksyon sa koleksyon.

Ang parameter na key sa items ay natatanging nagpapakilala sa bawat elemento. Ayon sa Material Design Guidelines, 2025, ang mga susi ay nagpapabuti sa pagganap kapag nag-a-update at nag-a-animate ng mga elemento, dahil masusubaybayan ng Compose ang paglipat o pagbabago ng isang partikular na elemento sa pamamagitan ng susi.

Halimbawa na may iba't ibang uri ng elemento

Ang function na items na may contentType ay nagbibigay-daan sa LazyColumn na i-optimize ang muling paggamit ng mga elemento ng iba't ibang uri. Sa halimbawa sa ibaba, sa isang listahan ay ginagamit ang mga header ng seksyon at ordinaryong row.

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

LazyListState at kontrol sa pag-scroll

LazyListState ay isang state object ng LazyColumn na sumusubaybay sa kasalukuyang posisyon ng pag-scroll, unang nakikitang elemento at offset. Maaari itong gawin sa pamamagitan ng rememberLazyListState() at ipasa sa parameter na state ng LazyColumn.

LazyListState ay nagbibigay ng mga pamamaraan na animateScrollToItem at scrollToItem para sa programmatic na pag-scroll sa isang partikular na elemento. Ang animateScrollToItem ay lumilikha ng makinis na scroll animation, habang ang scrollToItem ay agad na nag-i-scroll. Ang parehong pamamaraan ay nangangailangan ng pagtawag sa loob ng isang coroutine sa CompositionContext.

Ayon sa Android Developers, 2024, ang LazyListState ay naglalaman din ng layoutInfo, na nagbibigay ng impormasyon tungkol sa mga nakikitang elemento — kanilang mga index, offset at sukat. Ito ay kapaki-pakinabang para sa pagpapatupad ng analytics, pagsubaybay sa mga view o walang katapusang pag-scroll.

Halimbawa na may programmatic na pag-scroll

Sa halimbawang ito, ang LazyColumn ay pinamamahalaan sa pamamagitan ng LazyListState. Ang button ay nag-i-scroll sa listahan patungo sa elemento na may index 50 na may makinis na animation.

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

    Column {
        Button(
            onClick = {
                scope.launch {
                    listState.animateScrollToItem(50)
                }
            }
        ) {
            Text("Mag-scroll sa 50")
        }

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

Pag-optimize ng pagganap ng LazyColumn

Ang pangunahing kadahilanan sa pagganap ng LazyColumn ay ang tamang paggamit ng mga susi. Ang bawat elemento ay dapat magkaroon ng natatanging matatag na susi sa pamamagitan ng parameter na key. Kung walang mga susi, hindi maaaring gamitin muli ng Compose ang mga elemento nang tama kapag nagbago ang data, na humahantong sa recomposition.

contentType ay nagpapaalam sa LazyColumn kung aling mga elemento ang may parehong uri ng layout. Kapag ang dalawang elemento na may parehong contentType ay pumasok sa processing area, maaaring gamitin muli ng LazyColumn ang kanilang layout nang walang recomposition. Ayon sa Android Developers Blog, 2024, ang contentType ay nagpapabuti ng pagganap ng 30–50% sa mga listahan na may iba't ibang uri ng elemento.

Para sa LazyColumn mahalaga rin na iwasan ang hindi matatag na mga parameter sa factory function. Sa bawat oras na magbago ang parameter ng isang elemento, ire-recompose ng Compose ang elementong iyon. Ang paggamit ng remember at derivedStateOf para sa matatag na halaga ay nagbabawas sa bilang ng mga recomposition.

Talaan ng mga kadahilanan ng pagganap

Sticky headers at mga seksyon sa LazyColumn

stickyHeader ay isang DSL function ng LazyColumn na nag-aayos ng header ng seksyon sa itaas na bahagi ng listahan habang nag-i-scroll. Kapag ang susunod na seksyon ay umabot sa itaas, ang header nito ay pumapalit sa kasalukuyan. Ang pag-uugaling ito ay pamilyar sa mga gumagamit mula sa mga listahan ng contact at kalendaryo.

stickyHeader ay tumatanggap ng susi at factory function, katulad ng item. Hindi tulad ng ordinaryong item, ang stickyHeader ay nananatiling nakikita habang nag-i-scroll ang nilalaman ng seksyon nito. Kapag ang seksyon ay ganap na na-scroll, ang header ng susunod na seksyon ay itinutulak ang nauna.

Ayon sa Material Design Guidelines, 2025, ang sticky header ay nagpapabuti sa nabigasyon sa mahabang listahan at nagbabawas ng cognitive load ng gumagamit. Para sa pagpapatupad ng sticky header, sapat na upang balutin ang header ng seksyon sa stickyHeader sa tamang posisyon kaugnay ng mga elemento ng items.

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