LazyRow in Jetpack Compose — was es ist, Eigenschaften und wie es funktioniert

Was ist LazyRow in Jetpack Compose

LazyRow — ist eine Composeable-Funktion, die eine horizontale scrollbare Liste mit verzögerter Ladung von Elementen implementiert. Im Gegensatz zu Row, das alle untergeordneten Elemente gleichzeitig rendert, erstellt LazyRow nur die im Ansichtsbereich sichtbaren Elemente.

LazyRow funktioniert nach dem gleichen Prinzip wie LazyColumn, ordnet Elemente jedoch horizontal an. Beim Scrollen nach links oder rechts werden Elemente, die den Ansichtsbereich verlassen, wiederverwendet, um neue anzuzeigen. Dies ist für Galerien mit vielen Bildern oder lange Kategorielisten von entscheidender Bedeutung.

Laut Android Developers Blog, 2024 verwendet LazyRow die gleiche LazyList-Architektur wie LazyColumn, einschließlich LazyListState, Wiederverwendungsmechanismus über Pool und Unterstützung für verschiedene Elementtypen. Maximale Effizienz wird mit fester Elementhöhe erreicht.

Basis-Signatur von LazyRow

LazyRow akzeptiert die Parameter modifier, state, contentPadding, reverseLayout, horizontalArrangement und verticalAlignment. Der Inhalt wird über DSL-Funktionen items und item definiert, ähnlich wie bei 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))
            }
        }
    }
}

Eigenschaften von LazyRow: horizontalArrangement und contentPadding

horizontalArrangement steuert die Verteilung der Elemente entlang der horizontalen Achse innerhalb von LazyRow. Die gleichen Arrangement-Werte wie bei Row sind verfügbar: Start, Center, End, SpaceBetween, SpaceEvenly, SpaceAround und spacedBy mit benutzerdefiniertem Abstand.

contentPadding fügt Abstände an den Rändern des LazyRow-Containers hinzu. Im Gegensatz zu Modifier.padding wird contentPadding beim Scrollen berücksichtigt: Das erste Element hat einen Abstand vom linken Rand, das letzte vom rechten Rand. Laut Material Design Guidelines, 2025 ist contentPadding für Karussells und Galerien erforderlich, damit das erste und letzte Element nicht am Bildschirmrand kleben.

verticalAlignment richtet Elemente vertikal innerhalb von LazyRow aus. Standardmäßig wird Alignment.Top verwendet. Um Elemente unterschiedlicher Höhe zu zentrieren, verwenden Sie Alignment.CenterVertically, was für Karussells mit Bildern unterschiedlicher Seitenverhältnisse nützlich ist.

LazyRow-Parameter-Tabelle

Horizontales Scroll-Management mit LazyListState

LazyListState für LazyRow funktioniert identisch zu LazyColumn: Es verfolgt das erste sichtbare Element, den Offset und die gesamte Scrollposition. Der Zustand wird über rememberLazyListState() erstellt und an den state-Parameter übergeben.

Die programmatische Scrollsteuerung von LazyRow erfolgt mit denselben Methoden: animateScrollToItem für sanfte Animation und scrollToItem für sofortiges Scrollen. Beide werden innerhalb einer Koroutine aufgerufen. Dies ist nützlich für Karussells mit Vor-/Zurück-Buttons oder für automatisches Scrollen.

Laut Android Developers, 2024 unterstützt LazyRow auch SnapFlingBehavior — ein Verhalten für schnelles Scrollen, das am nächsten Element statt zwischen Elementen stoppt. Dies erzeugt einen Einrast-Effekt, der von Karussells und Galerien bekannt ist.

@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("Zum Starten") }
        }
    }
}

Anwendungsbeispiele von LazyRow in Oberflächen

Das erste Beispiel — LazyRow für eine Bildergalerie mit Vorschauen. Jedes Element ist eine Box mit einem Bild und einer Beschriftung. LazyRow verarbeitet dutzende und hunderte Bilder effizient, indem es nur die sichtbaren lädt.

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

Das zweite Beispiel — LazyRow für eine Kategorieliste mit Symbolen. Die Kategorien werden als Chips angezeigt und der Benutzer kann sie horizontal scrollen. LazyRow mit spacedBy und contentPadding erstellt Abstände zwischen Kategorien und an den Rändern.

@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 vs Row: wann was wählen

Die Wahl zwischen LazyRow und Row hängt von der Anzahl der Elemente ab. Row eignet sich für 5–10 Elemente, die immer auf dem Bildschirm sichtbar sind. LazyRow ist notwendig, wenn viele Elemente vorhanden sind oder deren Anzahl dynamisch ist.

Row rendert alle Elemente auf einmal, was bei einer großen Anzahl von Elementen zu Verzögerungen führt. LazyRow rendert nur die sichtbaren, was es für scrollbare Listen bevorzugt macht. Laut Android Developers Blog, 2024 liegt der Schwellenwert bei etwa 10 Elementen: Wenn es mehr Elemente gibt, verwenden Sie LazyRow.

LazyRow unterstützt auch Animationen, SnapFlingBehavior und Gruppierung über Trennzeichen, was es flexibler für komplexe Oberflächen macht. Row ist einfacher und benötigt kein LazyListState, ist aber nicht für lange Listen optimiert.

• Row — für 5–10 statische Elemente ohne Scrollen
• LazyRow — für 10+ Elemente mit horizontalem Scrollen
• LazyRow — für Karussells, Galerien, dynamische Listen