0Pricing
Jetpack Compose Academy · Lektion

LazyRow für Karussells

Erstellen Sie eine horizontal scrollende Leiste.

LazyRow für Karussells ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

Scrolling Sideways

Sometimes content should slide left and right, like a movie shelf. For that you use LazyRow, the horizontal cousin of LazyColumn. ↔️

Why Not a Plain Row?

A plain Row composes every child immediately and cannot scroll. A LazyRow scrolls horizontally and only builds the items in view.

Basic LazyRow

You feed LazyRow items just like a column, but they line up side by side instead of stacking.

LazyRow {
    items(movies) { movie ->
        MovieCard(movie)
    }
}

Spacing Cards Apart

Carousel cards need gaps. Use horizontalArrangement with spacedBy to set a consistent space between each card.

LazyRow(
    horizontalArrangement = Arrangement.spacedBy(12.dp)
) { }

Padding at the Ends

Add contentPadding so the first card peeks in from the edge instead of being clipped flush against it.

contentPadding = PaddingValues(horizontal = 16.dp)

Sizing Each Card

Give each carousel item a fixed width so cards stay uniform as the user swipes through them.

MovieCard(movie, Modifier.width(140.dp))

A Peek of the Next Card

Make a fraction of the next card visible to hint there is more. A slightly smaller card width relative to the screen does this nicely.

val cardWidth = screenWidth * 0.8f
MovieCard(movie, Modifier.width(cardWidth))

Headers Above Carousels

A carousel usually sits under a title. Compose the LazyRow inside a Column, with a Text header above it.

Column {
    Text("Trending Now")
    LazyRow { items(movies) { MovieCard(it) } }
}

Nesting in a LazyColumn

A home screen often stacks many carousels. Place several LazyRow rows inside a parent LazyColumn for a Netflix-style feed.

LazyColumn {
    items(shelves) { shelf ->
        Shelf(shelf)
    }
}

Each Row Needs Width

A LazyRow inside a LazyColumn fills the available width automatically. Just ensure the parent gives it a finite width to measure against.

When to Use LazyRow

Reach for LazyRow for shelves, chip filters, story bubbles, and any content that invites a horizontal swipe rather than a downward scroll.

Quick Check

Think about horizontal scrolling.

Recap: Carousels

You built horizontal shelves with LazyRow: side-by-side items, spacing, end padding, fixed-width cards, and nesting inside a feed. 🎬

Häufig gestellte Fragen

Ist die Lektion „LazyRow für Karussells“ kostenlos?

Ja — der vollständige Text von „LazyRow für Karussells“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „LazyRow für Karussells“?

Erstellen Sie eine horizontal scrollende Leiste. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?

Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „LazyRow für Karussells“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?

Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. LazyVerticalGrid-Galerien
  2. LazyRow für Karussells
  3. Adaptive und feste Grid-Zellen
  4. Scroll-State und programmgesteuertes Scrollen
← Zurück zu Jetpack Compose Academy