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

Ano ang LazyRow sa Jetpack Compose

LazyRow — ay isang composable function na nagpapatupad ng pahalang na nai-scroll na listahan na may lazy loading ng mga elemento. Hindi tulad ng Row na ni-re-render ang lahat ng child element nang sabay-sabay, ang LazyRow ay gumagawa lamang ng mga elementong nakikita sa viewing area.

Ang LazyRow ay gumagana sa parehong prinsipyo ng LazyColumn, ngunit inaayos ang mga elemento nang pahalang. Sa pag-scroll pakaliwa o pakanan, ang mga elementong lumabas sa viewing area ay muling ginagamit para magpakita ng mga bago. Ito ay kritikal para sa mga gallery na may maraming larawan o mahabang listahan ng kategorya.

Ayon sa Android Developers Blog, 2024, ang LazyRow ay gumagamit ng parehong LazyList architecture gaya ng LazyColumn, kabilang ang LazyListState, mekanismo ng muling paggamit sa pamamagitan ng Pool at suporta para sa iba't ibang uri ng elemento. Ang maximum na kahusayan ay nakakamit gamit ang fixed na taas ng elemento.

Batayang signature ng LazyRow

LazyRow ay tumatanggap ng mga parameter na modifier, state, contentPadding, reverseLayout, horizontalArrangement at verticalAlignment. Ang nilalaman ay tinutukoy sa pamamagitan ng DSL functions na items at item, katulad ng 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))
            }
        }
    }
}

Mga katangian ng LazyRow: horizontalArrangement at contentPadding

horizontalArrangement namamahala sa distribusyon ng mga elemento sa kahabaan ng pahalang na axis sa loob ng LazyRow. Ang parehong mga halaga ng Arrangement tulad ng sa Row ay available: Start, Center, End, SpaceBetween, SpaceEvenly, SpaceAround at spacedBy na may custom na spacing.

contentPadding nagdaragdag ng padding sa mga gilid ng LazyRow container. Hindi tulad ng Modifier.padding, ang contentPadding ay isinasaalang-alang sa pag-scroll: ang unang elemento ay may puwang mula sa kaliwang gilid, ang huli — mula sa kanang gilid. Ayon sa Material Design Guidelines, 2025, ang contentPadding ay kinakailangan para sa mga carousel at gallery upang ang una at huling elemento ay hindi dumikit sa gilid ng screen.

verticalAlignment nag-a-align ng mga elemento nang patayo sa loob ng LazyRow. Bilang default, Alignment.Top ang ginagamit. Para sa pag-centre ng mga elementong may iba't ibang taas, gamitin ang Alignment.CenterVertically, na kapaki-pakinabang para sa mga carousel na may mga larawang may iba't ibang ratio.

Talahanayan ng mga parameter ng LazyRow

Pagkontrol ng pahalang na pag-scroll gamit ang LazyListState

LazyListState para sa LazyRow ay gumagana nang katulad ng LazyColumn: sinusubaybayan nito ang unang nakikitang elemento, offset at pangkalahatang posisyon ng pag-scroll. Ang estado ay nilikha sa pamamagitan ng rememberLazyListState() at ipinapasa sa parameter na state.

Ang programmatic na kontrol ng pag-scroll ng LazyRow ay ginagawa gamit ang parehong mga pamamaraan: animateScrollToItem para sa smooth animation at scrollToItem para sa instant scrolling. Pareho ay tinatawag sa loob ng isang coroutine. Ito ay kapaki-pakinabang para sa mga carousel na may mga button na "Kaliwa/Kanan" o para sa automatic scrolling.

Ayon sa Android Developers, 2024, ang LazyRow ay sumusuporta rin sa SnapFlingBehavior — pag-uugali sa mabilis na pag-scroll na humihinto sa pinakamalapit na elemento, hindi sa pagitan ng mga elemento. Ito ay lumilikha ng epektong "dumikit" sa elemento, pamilyar sa mga carousel at gallery.

@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("Upang magsimula") }
        }
    }
}

Mga halimbawa ng paggamit ng LazyRow sa mga interface

Unang halimbawa — LazyRow para sa gallery ng larawan na may mga preview. Bawat elemento ay Box na may larawan at caption. Ang LazyRow ay mahusay na humahawak ng sampu-sampung daan-daang larawan, nilo-load lamang ang mga nakikita.

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

Ikalawang halimbawa — LazyRow para sa listahan ng kategorya na may mga icon. Ang mga kategorya ay ipinapakita bilang mga chip, at ang user ay maaaring mag-scroll sa mga ito nang pahalang. Ang LazyRow na may spacedBy at contentPadding ay lumilikha ng espasyo sa pagitan ng mga kategorya at sa mga gilid.

@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 laban sa Row: kailan pipiliin ang alin

Ang pagpili sa pagitan ng LazyRow at Row ay depende sa bilang ng mga elemento. Ang Row ay angkop para sa 5–10 elemento na palaging nakikita sa screen. Ang LazyRow ay kinakailangan kapag maraming elemento o ang bilang nito ay dynamic.

Row ni-re-render ang lahat ng elemento nang sabay-sabay, na nagdudulot ng pagkaantala sa maraming elemento. Ang LazyRow ay nagre-render lamang ng mga nakikitang elemento, ginagawa itong mas gusto para sa mga listahang may pag-scroll. Ayon sa Android Developers Blog, 2024, ang threshold ng paglipat ay humigit-kumulang 10 elemento: kung mas marami, gamitin ang LazyRow.

LazyRow ay sumusuporta rin sa mga animation, SnapFlingBehavior at pagpapangkat sa pamamagitan ng mga separator, ginagawa itong mas flexible para sa mga kumplikadong interface. Ang Row ay mas simple at hindi nangangailangan ng LazyListState, ngunit hindi optimized para sa mahabang listahan.

• Row — para sa 5–10 static na elemento walang pag-scroll
• LazyRow — para sa 10+ elemento na may pahalang na pag-scroll
• LazyRow — para sa mga carousel, gallery, dynamic na listahan