0Pricing
Jetpack Compose Academy · Leçon

LazyRow pour les carrousels

Créez une étagère à défilement horizontal.

LazyRow pour les carrousels est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Jetpack Compose Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Jetpack Compose Academy comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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. 🎬

Questions Fréquemment Posées

La leçon « LazyRow pour les carrousels » est-elle gratuite ?

Oui — le texte complet de « LazyRow pour les carrousels » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Jetpack Compose Academy, passe à CoddyKit PRO. Le cours Jetpack Compose Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « LazyRow pour les carrousels » ?

Créez une étagère à défilement horizontal. Tu pratiques Jetpack Compose Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Jetpack Compose Academy ?

Aucune expérience préalable n'est requise. Jetpack Compose Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « LazyRow pour les carrousels » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Jetpack Compose Academy ?

Oui. Chaque leçon Jetpack Compose Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Galeries LazyVerticalGrid
  2. LazyRow pour les carrousels
  3. Cellules de grille adaptatives ou fixes
  4. État de défilement et défilement programmatique
← Retour à Jetpack Compose Academy