LazyRow v Jetpack Compose — co to je, vlastnosti a jak funguje

Co je LazyRow v Jetpack Compose

LazyRow — je composable funkce, která implementuje horizontální posouvatelný seznam s líným načítáním prvků. Na rozdíl od Row, který vykresluje všechny podřízené prvky najednou, LazyRow vytváří pouze prvky viditelné v oblasti zobrazení.

LazyRow funguje na stejném principu jako LazyColumn, ale umísťuje prvky horizontálně. Při posouvání doleva nebo doprava jsou prvky, které opustily oblast zobrazení, znovu použity k zobrazení nových. To je kriticky důležité pro galerie s velkým počtem obrázků nebo dlouhé seznamy kategorií.

Podle Android Developers Blog, 2024 používá LazyRow stejnou architekturu LazyList jako LazyColumn, včetně LazyListState, mechanismu opětovného použití přes Pool a podpory různých typů prvků. Maximální účinnosti je dosaženo při použití pevné výšky prvků.

Základní signatura LazyRow

LazyRow přijímá parametry modifier, state, contentPadding, reverseLayout, horizontalArrangement a verticalAlignment. Obsah je definován pomocí DSL funkcí items a item, podobně jako 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))
            }
        }
    }
}

Vlastnosti LazyRow: horizontalArrangement a contentPadding

horizontalArrangement řídí rozložení prvků podél horizontální osy uvnitř LazyRow. Jsou k dispozici stejné hodnoty Arrangement jako v Row: Start, Center, End, SpaceBetween, SpaceEvenly, SpaceAround a spacedBy s vlastním odstupem.

contentPadding přidává odsazení na okrajích kontejneru LazyRow. Na rozdíl od Modifier.padding je contentPadding zohledněn při posouvání: první prvek bude mít odsazení od levého okraje, poslední — od pravého. Podle Material Design Guidelines, 2025 je contentPadding povinný pro kolotoče a galerie, aby první a poslední prvek nepřiléhaly k okraji obrazovky.

verticalAlignment zarovnává prvky vertikálně uvnitř LazyRow. Ve výchozím nastavení se používá Alignment.Top. Pro centrování prvků různé výšky použijte Alignment.CenterVertically, což je užitečné pro kolotoče s obrázky různých poměrů.

Tabulka parametrů LazyRow

Ovládání horizontálního posouvání pomocí LazyListState

LazyListState pro LazyRow funguje identicky jako pro LazyColumn: sleduje první viditelný prvek, odsazení a celkovou pozici posouvání. Stav je vytvořen pomocí rememberLazyListState() a předán v parametru state.

Programové řízení posouvání LazyRow se provádí stejnými metodami: animateScrollToItem pro plynulou animaci a scrollToItem pro okamžité posouvání. Obě jsou volány uvnitř korutiny. To je užitečné pro kolotoče s tlačítky „Doleva/Doprava" nebo pro automatické posouvání.

Podle Android Developers, 2024 LazyRow také podporuje SnapFlingBehavior — chování při rychlém posouvání, které se zastaví na nejbližším prvku, nikoli mezi prvky. To vytváří efekt „přilepení" k prvku, známý z kolotočů a galerií.

@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("Pro spuštění") }
        }
    }
}

Příklady použití LazyRow v rozhraních

První příklad — LazyRow pro galerii obrázků s náhledy. Každý prvek je Box s obrázkem a popiskem. LazyRow efektivně zpracovává desítky a stovky obrázků, načítá pouze viditelné.

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

Druhý příklad — LazyRow pro seznam kategorií s ikonami. Kategorie jsou zobrazeny jako chipy a uživatel je může horizontálně posouvat. LazyRow s spacedBy a contentPadding vytváří mezery mezi kategoriemi a na okrajích.

@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 versus Row: kdy co zvolit

Volba mezi LazyRow a Row závisí na počtu prvků. Row je vhodný pro 5–10 prvků, které jsou vždy viditelné na obrazovce. LazyRow je povinný, když je prvků mnoho nebo je jejich počet dynamický.

Row vykresluje všechny prvky najednou, což vede ke zpožděním při velkém počtu prvků. LazyRow vykresluje pouze viditelné prvky, což jej činí preferovaným pro seznamy s posouváním. Podle Android Developers Blog, 2024 je práh přechodu přibližně 10 prvků: pokud je jich více, použijte LazyRow.

LazyRow také podporuje animace, SnapFlingBehavior a seskupování pomocí oddělovačů, což jej činí flexibilnějším pro složitá rozhraní. Row je jednodušší a nevyžaduje LazyListState, ale není optimalizován pro dlouhé seznamy.

• Row — pro 5–10 statických prvků bez posouvání
• LazyRow — pro 10+ prvků s horizontálním posouváním
• LazyRow — pro kolotoče, galerie, dynamické seznamy