LazyRow a Jetpack Compose-ban — mi ez, tulajdonságai és működése

Mi az a LazyRow a Jetpack Compose-ban

LazyRow — egy composable függvény, amely egy vízszintesen görgethető listát valósít meg elemek lusta betöltésével. A Row-val ellentétben, amely az összes gyermekelemet egyszerre rendereli, a LazyRow csak a megtekintési területen látható elemeket hozza létre.

A LazyRow ugyanazon az elven működik, mint a LazyColumn, de az elemeket vízszintesen rendezi el. Balra vagy jobbra görgetéskor a látótérből kikerült elemek újra felhasználásra kerülnek az újak megjelenítéséhez. Ez kritikus fontosságú a nagyszámú képet tartalmazó galériák vagy hosszú kategórialisták esetén.

A Android Developers Blog, 2024 szerint a LazyRow ugyanazt a LazyList architektúrát használja, mint a LazyColumn, beleértve a LazyListState-t, a Pool-on keresztüli újrafelhasználási mechanizmust és a különböző elemtípusok támogatását. A maximális hatékonyság az elemek rögzített magasságának használatával érhető el.

A LazyRow alap szignatúrája

LazyRow elfogadja a modifier, state, contentPadding, reverseLayout, horizontalArrangement és verticalAlignment paramétereket. A tartalom DSL items és item függvényeken keresztül definiálható, hasonlóan a LazyColumn-hoz.

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

A LazyRow tulajdonságai: horizontalArrangement és contentPadding

horizontalArrangement kezeli az elemek elosztását a vízszintes tengely mentén a LazyRow-n belül. Ugyanazok az Arrangement értékek érhetők el, mint a Row-ban: Start, Center, End, SpaceBetween, SpaceEvenly, SpaceAround és spacedBy egyéni távolsággal.

contentPadding kitöltést ad a LazyRow tároló széleihez. A Modifier.padding-gal ellentétben a contentPadding figyelembe van véve görgetéskor: az első elem távolságra lesz a bal széltől, az utolsó a jobb széltől. A Material Design Guidelines, 2025 szerint a contentPadding kötelező a körhinták és galériák esetében, hogy az első és utolsó elem ne tapadjon a képernyő széléhez.

verticalAlignment függőlegesen igazítja az elemeket a LazyRow-n belül. Alapértelmezés szerint az Alignment.Top használatos. Különböző magasságú elemek középre igazításához használja a Alignment.CenterVertically-t, ami hasznos a különböző arányú képeket tartalmazó körhintákhoz.

A LazyRow paramétereinek táblázata

Vízszintes görgetés vezérlése LazyListState-tel

LazyListState a LazyRow esetében azonos módon működik, mint a LazyColumn esetében: nyomon követi az első látható elemet, az eltolást és az általános görgetési pozíciót. Az állapot a rememberLazyListState() segítségével jön létre, és a state paraméterben kerül átadásra.

A LazyRow programozott görgetésvezérlése ugyanazokkal a metódusokkal történik: animateScrollToItem a sima animációhoz és scrollToItem az azonnali görgetéshez. Mindkettő egy korutin belül hívódik meg. Ez hasznos a "Balra/Jobbra" gombokkal rendelkező körhintákhoz vagy automatikus görgetéshez.

A Android Developers, 2024 szerint a LazyRow támogatja a SnapFlingBehavior-t is — egy olyan viselkedést hirtelen görgetéskor, amely a legközelebbi elemen áll meg, nem az elemek között. Ez egy "tapadó" hatást hoz létre az elemen, ami ismerős a körhintákból és galériákból.

@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("Az induláshoz") }
        }
    }
}

Példák a LazyRow használatára interfészekben

Első példa — LazyRow egy képgalériához előnézetekkel. Minden elem egy Box, amely egy képet és egy feliratot tartalmaz. A LazyRow hatékonyan kezel több tíz és száz képet, csak a láthatóakat töltve be.

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

Második példa — LazyRow egy kategórialistához ikonokkal. A kategóriák chip formájában jelennek meg, és a felhasználó vízszintesen görgetheti őket. A LazyRow spacedBy és contentPadding paraméterekkel távolságot hoz létre a kategóriák között és a széleken.

@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 kontra Row: mikor mit válasszunk

A LazyRow és a Row közötti választás az elemek számától függ. A Row 5–10 olyan elemhez alkalmas, amelyek mindig láthatók a képernyőn. A LazyRow kötelező, ha sok elem van, vagy az elemek száma dinamikus.

Row az összes elemet egyszerre rendereli, ami nagy elemszám esetén késésekhez vezet. A LazyRow csak a látható elemeket rendereli, ami preferáltá teszi görgethető listákhoz. A Android Developers Blog, 2024 szerint az átmeneti küszöb körülbelül 10 elem: ha több van, használja a LazyRow-t.

LazyRow támogatja az animációkat, a SnapFlingBehavior-t és az elválasztókkal történő csoportosítást is, ami rugalmasabbá teszi összetett interfészekhez. A Row egyszerűbb és nem igényel LazyListState-ot, de nincs optimalizálva hosszú listákhoz.

• Row — 5–10 statikus elemhez görgetés nélkül
• LazyRow — 10+ elemhez vízszintes görgetéssel
• LazyRow — körhintákhoz, galériákhoz, dinamikus listákhoz