Cómo mostrar elementos de desplazamiento anidados en una lista
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Puedes mostrar elementos de desplazamiento anidados dentro de una lista para presentar diseños complejos, como catálogos de productos, galerías de contenido multimedia, feeds de noticias y mucho más.
Compatibilidad de versiones
Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.
Dependencias
El siguiente código produce una lista que se desplaza en dos direcciones. Las filas de la lista
se desplazan horizontalmente; la lista en su totalidad (una sola columna) se desplaza verticalmente.
@Composable
fun NestedScrollingRowsList(urls: List<String>) {
LazyColumn {
items(10) {
LazyRow {
item { Text("Row: $it") }
items(urls.size) { index ->
// AsyncImage provided by Coil.
AsyncImage(
model = urls[index],
modifier = Modifier.size(150.dp),
contentDescription = null
)
}
}
}
}
}
Resultados
En el siguiente video, se muestran los comportamientos resultantes de las listas horizontales anidadas dentro de una lista de desplazamiento vertical.
Colecciones que contienen esta guía
Esta guía forma parte de estas colecciones de guías rápidas seleccionadas que abarcan objetivos más amplios de desarrollo de Android:
Cómo mostrar una lista o una cuadrícula
Las listas y las cuadrículas permiten que tu app muestre colecciones de una forma visualmente atractiva y fácil de consumir para los usuarios.
Cómo mostrar componentes interactivos
Descubre cómo las funciones de componibilidad pueden ayudarte a crear fácilmente componentes de IU atractivos basados en el sistema de diseño de Material Design.
Conceptos básicos de Compose (colección de videos)
En esta serie de videos, se presentan varias APIs de Compose y se muestra rápidamente lo que está disponible y cómo usarlo.
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-02-06 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2025-02-06 (UTC)"],[],[],null,["# Display nested scrolling items in a list\n\n\u003cbr /\u003e\n\nYou can display nested scrolling items within a list to present complex layouts,\nsuch as product catalogs, media galleries, news feeds, and more.\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n implementation(\"libs.androidx.material3\")\n implementation(\"io.coil-kt:coil-compose:2.6.0\")\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n implementation \"libs.androidx.material3\"\n implementation \"io.coil-kt:coil-compose:2.6.0\"\n \n```\n\n\u003cbr /\u003e\n\nImplement nested horizontal scrolling in vertical list\n------------------------------------------------------\n\nThe following code produces a list that scrolls two ways. The rows of the list\nscroll horizontally; the list as a whole---a single column---scrolls vertically.\n\n\n```kotlin\n@Composable\nfun NestedScrollingRowsList(urls: List\u003cString\u003e) {\n LazyColumn {\n items(10) {\n LazyRow {\n item { Text(\"Row: $it\") }\n items(urls.size) { index -\u003e\n // AsyncImage provided by Coil.\n AsyncImage(\n model = urls[index],\n modifier = Modifier.size(150.dp),\n contentDescription = null\n )\n }\n }\n }\n }\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/lists/NestedScrollingItem.kt#L29-L46\n```\n\n\u003cbr /\u003e\n\nResults\n-------\n\nThe following video shows the resulting behaviors of nested horizontal lists\nwithin a vertical scrolling list.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display a list or grid\n\nLists and grids allow your app to display collections in a visually pleasing form that's easy for users to consume. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-a-list-or-grid) \n\n### Display interactive components\n\nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\n### Compose basics (video collection)\n\nThis series of videos introduces various Compose APIs, quickly showing you what's available and how to use them. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/compose-basics) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
