LazyRow para carruseles
Cree una estantería con desplazamiento horizontal.
LazyRow para carruseles es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Jetpack Compose Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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. 🎬
Aprende Kotlin con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 30
- Lecciones
- 120
Preguntas frecuentes
¿La lección «LazyRow para carruseles» es gratis?
Sí — el texto completo de «LazyRow para carruseles» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Jetpack Compose Academy, actualiza a CoddyKit PRO. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
¿Qué aprenderé en «LazyRow para carruseles»?
Cree una estantería con desplazamiento horizontal. Practicas Jetpack Compose Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Jetpack Compose Academy?
No se requiere experiencia previa. Jetpack Compose Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «LazyRow para carruseles»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Jetpack Compose Academy?
Sí. Cada lección de Jetpack Compose Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Galerías con LazyVerticalGrid
- LazyRow para carruseles
- Celdas de grid adaptativas frente a fijas
- Estado de desplazamiento y desplazamiento programático