LazyColumn — ano ito, mahusay na listahan sa Compose

Ano ang LazyColumn sa Jetpack Compose?

LazyColumn — ay isang composable function mula sa Foundation Compose library na nagpapakita ng vertical na listahan ng mga elemento na may tamad na (lazy) pag-load: tanging ang mga elementong nakikita sa screen o malapit dito (prefetch zone) ang nilikha at binubuo. Lumitaw ang LazyColumn sa Compose 1.0 (2021) kasama ang LazyRow (horizontal na listahan) at LazyVerticalGrid (grid).

Tamad na pag-load ay gumagana sa pamamagitan ng mekanismong SubcomposeLayout: sinusukat ng LazyColumn ang available na espasyo, hinihiling ang nakikitang saklaw mula sa LayoutInfo at binubuo lamang ang mga elemento sa saklaw na iyon. Ang mga elementong umalis na sa screen ay umaalis sa komposisyon (maliban sa prefetch buffer). Ayon sa datos ng Google (Android Performance, 2026), ang LazyColumn ay nagbibigay ng 60 FPS kapag nag-i-scroll ng listahan ng 10000+ elemento sa mga mid-range na device.

Pagkakaiba sa Column + ScrollState

Column na may vertical na pag-scroll — ay ang karaniwang paglalagay ng lahat ng elemento sa ilalim ng bawat isa na may aplikasyon ng verticalScroll modifier. Ang Column ay hindi tamad: lahat ng child element ay agad na binubuo, kahit na hindi sila nakikita. Para sa listahan ng 200+ elemento, ang Column ay nagdudulot ng malaking lag sa pagsisimula. Ang LazyColumn ay bumubuo lamang ng mga nakikitang elemento + buffer (default 1 screen pasulong/paurong), ginagawa itong kailangang-kailangan para sa mahabang listahan.

items API: pagbubuklod ng datos sa listahan

items API — set ng mga extension function para sa LazyColumn na tumatanggap ng listahan ng datos at DSL descriptor para sa bawat elemento. Pangunahing function: items(count, key, itemContent) para sa nakapirming bilang, items(list, key, itemContent) para sa listahan, itemsIndexed(list, key, itemContent) na may index. Ang parameter na key — sapilitang kondisyon para sa pagganap — ay nagbibigay sa Compose ng matatag na identifier ng elemento.

// Pangunahing LazyColumn na may itemContent
@Composable
fun ArticleList(articles: List<Article>) {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        // Header — hindi tamad, palagi sa simula
        item {
            Text("Mga pinakabagong artikulo", style = MaterialTheme.typography.headlineMedium)
        }

        // Listahan ng mga artikulo na may susi sa id
        items(articles, key = { it.id }) { article ->
            ArticleCard(
                title = article.title,
                summary = article.summary,
                onClick = { onArticleClick(article.id) }
            )
        }

        // Footer na may tagapagpahiwatig ng pag-load
        item {
            CircularProgressIndicator(
                modifier = Modifier.fillMaxWidth().padding(16.dp)
            )
        }
    }
}

// Pasadyang elemento ng listahan
@Composable
fun ArticleCard(title: String, summary: String, onClick: () -> Unit) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .clickable(onClick = onClick)
    ) {
        Column(modifier = Modifier.padding(12.dp)) {
            Text(text = title, style = MaterialTheme.typography.titleMedium)
            Spacer(modifier = Modifier.height(4.dp))
            Text(text = summary, style = MaterialTheme.typography.bodyMedium)
        }
    }
}

item {} vs items(): gamitin ang item {} para sa mga solong elemento na laging nasa listahan (header, footer, separator). Gamitin ang items() para sa dynamic na listahan ng datos. Ang items() ay tumatanggap ng Iterable o Int at isang DSL block na tinatawag para sa bawat elemento. Pagsamahin ang item at items sa iisang LazyColumn: ang pagkakasunod-sunod ng tawag ay tumutukoy sa pagkakasunod-sunod ng pagpapakita.

LazyListState: pamamahala ng posisyon ng pag-scroll

LazyListState — bagay na nag-iimbak ng estado ng listahan: kasalukuyang posisyon ng pag-scroll (firstVisibleItemIndex, firstVisibleItemScrollOffset), mga nakikitang elemento (layoutInfo) at mga pamamaraan ng programatikong pag-scroll (scrollToItem, animateScrollToItem). Ang LazyListState ay nilikha sa pamamagitan ng rememberLazyListState() at ipinapasa sa LazyColumn sa pamamagitan ng parameter na state.

// LazyColumn na may pagpapanatili ng posisyon ng pag-scroll
@Composable
fun ScrollingList(items: List<Item>) {
    val listState = rememberLazyListState()

    Box(modifier = Modifier.fillMaxSize()) {
        LazyColumn(state = listState) {
            items(items, key = { it.id }) { item ->
                ListItemView(item = item)
            }
        }

        // Lumilitaw ang button na "Pataas" pagkatapos ng ika-10 elemento
        val showButton by remember {
            derivedStateOf { listState.firstVisibleItemIndex > 10 }
        }

        AnimatedVisibility(visible = showButton) {
            FloatingActionButton(
                modifier = Modifier
                    .align(Alignment.BottomEnd)
                    .padding(16.dp),
                onClick = {
                    coroutineScope.launch {
                        listState.animateScrollToItem(0)
                    }
                }
            ) {
                Icon(Icons.Default.KeyboardArrowUp, "Tuktok")
            }
        }
    }
}

// Pagkuha ng impormasyon tungkol sa mga nakikitang elemento
@Composable
fun ListDebugInfo(listState: LazyListState) {
    val visibleItems = listState.layoutInfo.visibleItemsInfo
    val totalItems = listState.layoutInfo.totalItemsCount
    val firstItem = visibleItems.firstOrNull()?.index
    val lastItem = visibleItems.lastOrNull()?.index

    Text("Ipinapakita ang $firstItem–$lastItem mula sa $totalItems")
}

Programatikong pag-scroll ay isinasagawa sa pamamagitan ng suspend function ng listState: scrollToItem(index, scrollOffset) — agarang paglipat (walang animasyon), animateScrollToItem(index) — may animasyon. Para sa pag-scroll mula sa coroutine gamitin ang LaunchedEffect o coroutineScope.launch. Mahalaga: huwag tumawag ng suspend function mula sa komposisyon (sa loob ng @Composable) — gumamit ng lambda (onClick, LaunchedEffect).

LazyColumn vs RecyclerView: paghahambing ng mga diskarte

LazyColumn at RecyclerView ay lumulutas ng parehong gawain — mahusay na pagpapakita ng mahabang listahan. Ang pagkakaiba ay nasa arkitektura: ang RecyclerView ay gumagamit ng ViewHolder at Adapter (klasikong Android View), ang LazyColumn — deklaratibong composable function na walang XML at ViewHolder. Ang pagpili ay depende sa technology stack ng proyekto: Compose vs View-based UI.

Rekomendasyon ng Google (Android Developers, 2026): para sa mga bagong proyekto sa Jetpack Compose gamitin ang LazyColumn. Para sa View-based na proyekto gamitin ang RecyclerView. Ang LazyColumn ay nangangailangan ng Compose, na nagdaragdag ng humigit-kumulang 3–5 MB sa APK — isaalang-alang ito kapag sumusuporta sa mga lumang device. Kung ang proyekto ay gumagamit na ng View system, ang LazyColumn ay hindi maaaring magkasama sa parehong screen na may XML layout nang walang AndroidView — sa mga ganitong kaso mas madaling manatili sa RecyclerView.

LazyVerticalGrid at LazyHorizontalGrid: mga grid

LazyVerticalGrid — bersyon ng LazyColumn para sa mga grid na may nakapirming bilang ng mga column (columns). LazyHorizontalGrid — horizontal na grid na may nakapirming bilang ng mga row (rows). Parehong ginagamit ng dalawang bahagi ang parehong prinsipyo ng tamad na pag-load at parehong items API tulad ng LazyColumn. Tinutukoy ng parameter na columns ang bilang ng mga column sa pamamagitan ng GridCells.Fixed(N) o GridCells.Adaptive(minSize).

// Grid na may adaptibong mga column
@Composable
fun PhotoGrid(photos: List<Photo>) {
    LazyVerticalGrid(
        columns = GridCells.Adaptive(minSize = 128.dp),
        contentPadding = PaddingValues(8.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(photos, key = { it.id }) { photo ->
            AsyncImage(
                model = photo.url,
                contentDescription = photo.title,
                modifier = Modifier.aspectRatio(1f)
            )
        }
    }
}

// Horizontal na listahan (LazyRow)
@Composable
fun CategoryCarousel(categories: List<Category>) {
    LazyRow(
        contentPadding = PaddingValues(horizontal = 16.dp),
        horizontalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        items(categories, key = { it.id }) { category ->
            FilterChip(
                selected = category.isSelected,
                onClick = { onCategoryClick(category.id) },
                label = { Text(category.name) }
            )
        }
    }
}

GridCells.Adaptive ay awtomatikong kinakalkula ang bilang ng mga column batay sa minimum na laki ng cell. Halimbawa, ang GridCells.Adaptive(128.dp) sa isang screen na 360 dp ang lapad ay naglalagay ng 2 column, sa isang tablet na 600 dp — 4 na column. GridCells.Fixed(2) ay palaging nagpapakita ng eksaktong 2 column. Ang Adaptive ay mas mainam para sa multi-screen adaptation — awtomatiko itong umaangkop sa lapad ng screen nang walang media query.

Pagganap ng LazyColumn: key, contentType, prefetch

Pagganap ng LazyColumn ay nakadepende sa tatlong factor: katatagan ng mga susi (key), uri ng nilalaman (contentType) at prefetch buffer (beyondBounds). Bilang default, ang LazyColumn ay nagba-buffer ng 1 screen pasulong at 1 paurong. Ang Google (Android Developers, 2026) ay nagrerekomenda na i-configure ang mga parameter na ito para sa mga listahan na may iba't ibang uri ng elemento o kumplikadong komposisyon.

// Na-optimize na LazyColumn na may contentType at prefetch
@Composable
fun OptimizedFeed(items: List<FeedItem>) {
    val listState = rememberLazyListState()

    LazyColumn(
        state = listState,
        modifier = Modifier.fillMaxSize(),
        beyondBoundsPageCount = 2  // prefetch 2 screen
    ) {
        items(
            items = items,
            key = { it.id },
            contentType = { it.type }  // paghihiwalay ayon sa uri
        ) { item ->
            when (item) {
                is FeedItem.Post -> PostView(item)
                is FeedItem.Ad -> AdView(item)
                is FeedItem.Suggested -> SuggestedView(item)
            }
        }
    }
}

// Pagsukat ng pagganap sa pamamagitan ng listState
@Composable
fun ScrollPerformance(listState: LazyListState) {
    val scrollInfo = listState.layoutInfo
    val visibleCount = scrollInfo.visibleItemsInfo.size
    val total = scrollInfo.totalItemsCount

    // derivedStateOf — hindi muling binubuo kung ang halaga ay hindi nagbago
    val scrollProgress by remember {
        derivedStateOf {
            if (total > 0) visibleCount.toFloat() / total else 0f
        }
    }

    LinearProgressIndicator(
        progress = scrollProgress,
        modifier = Modifier.fillMaxWidth().height(2.dp)
    )
}

Mga karaniwang pagkakamali: (1) kawalan ng key — ang mga elemento ay muling binubuo sa bawat pagbabago ng listahan; (2) paggamit ng mutableStateListOf nang walang snapshot stream — ang mga pagbabago ay maaaring hindi masubaybayan; (3) pagtawag ng suspend function sa loob ng itemContent — pumutol sa komposisyon; (4) walang contentType para sa mixed type — ginagamit muli ng Compose ang komposisyon ng ad para sa text post, na nagdudulot ng visual artifacts. Sa IT Sectr nagdaragdag kami ng contentType sa lahat ng listahan na may tatlo o higit pang uri ng nilalaman.