LazyRow у Jetpack Compose — шта је то, својства и како ради

Шта је LazyRow у Jetpack Compose

LazyRow — је composable функција која имплементира хоризонталну листу која се помера са лењим учитавањем елемената. За разлику од Row, који приказује све подређене елементе истовремено, LazyRow креира само елементе видљиве у области приказа.

LazyRow ради по истом принципу као LazyColumn, али распоређује елементе хоризонтално. При померању улево или удесно, елементи који су изашли из видљиве области се поново користе за приказ нових. Ово је критично важно за галерије са великим бројем слика или дугачке листе категорија.

Према Android Developers Blog, 2024, LazyRow користи исту LazyList архитектуру као LazyColumn, укључујући LazyListState, механизам поновног коришћења кроз Pool и подршку за различите типове елемената. Максимална ефикасност се постиже коришћењем фиксне висине елемената.

Основна сигнатура LazyRow

LazyRow прихвата параметре modifier, state, contentPadding, reverseLayout, horizontalArrangement и verticalAlignment. Садржај се дефинише кроз DSL функције items и item, слично 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))
            }
        }
    }
}

Својства LazyRow: horizontalArrangement и contentPadding

horizontalArrangement управља расподелом елемената дуж хоризонталне осе унутар LazyRow. Доступне су исте вредности Arrangement као у Row: Start, Center, End, SpaceBetween, SpaceEvenly, SpaceAround и spacedBy са прилагођеним размаком.

contentPadding додаје размаке на ивицама контејнера LazyRow. За разлику од Modifier.padding, contentPadding се узима у обзир при померању: први елемент ће имати размак од леве ивице, последњи — од десне. Према Material Design Guidelines, 2025, contentPadding је обавезан за каруселе и галерије како се први и последњи елемент не би лепили за ивицу екрана.

verticalAlignment поравнава елементе вертикално унутар LazyRow. Подразумевано се користи Alignment.Top. За центрирање елемената различитих висина користите Alignment.CenterVertically, што је корисно за каруселе са сликама различитих пропорција.

Табела параметара LazyRow

Управљање хоризонталним померањем са LazyListState

LazyListState за LazyRow ради идентично као за LazyColumn: прати први видљиви елемент, померај и општу позицију померања. Стање се креира кроз rememberLazyListState() и прослеђује у параметру state.

Програмско управљање померањем LazyRow се врши истим методама: animateScrollToItem за глатку анимацију и scrollToItem за тренутно померање. Обе се позивају унутар корутине. Ово је корисно за каруселе са дугмадима „Лево/Десно" или за аутоматско померање.

Према Android Developers, 2024, LazyRow такође подржава SnapFlingBehavior — понашање при наглом померању које се зауставља на најближем елементу, а не између елемената. Ово ствара ефекат „лепљења" за елемент, познат из карусела и галерија.

@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("Да бисте започели") }
        }
    }
}

Примери коришћења LazyRow у интерфејсима

Први пример — LazyRow за галерију слика са прегледима. Сваки елемент представља Box са сликом и описом. LazyRow ефикасно обрађује десетине и стотине слика, учитавајући само видљиве.

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

Други пример — LazyRow за листу категорија са иконицама. Категорије се приказују у облику чипова, а корисник их може померати хоризонтално. LazyRow са spacedBy и contentPadding ствара размаке између категорија и на ивицама.

@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 против Row: када шта изабрати

Избор између LazyRow и Row зависи од броја елемената. Row је погодан за 5–10 елемената који су увек видљиви на екрану. LazyRow је обавезан када је елемената много или је њихов број динамичан.

Row приказује све елементе одједном, што доводи до кашњења при великом броју елемената. LazyRow приказује само видљиве, што га чини пожељним за листе са померањем. Према Android Developers Blog, 2024, праг преласка је приближно 10 елемената: ако их је више, користите LazyRow.

LazyRow такође подржава анимације, SnapFlingBehavior и груписање кроз раздвајаче, што га чини флексибилнијим за сложене интерфејсе. Row је једноставнији и не захтева LazyListState, али није оптимизован за дугачке листе.

• Row — за 5–10 статичких елемената без померања
• LazyRow — за 10+ елемената са хоризонталним померањем
• LazyRow — за каруселе, галерије, динамичке листе