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)"],[],[]]