Cómo mostrar elementos de desplazamiento anidados en una lista

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

Implementa el desplazamiento horizontal anidado en la lista vertical

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
                    )
                }
            }
        }
    }
}
NestedScrollingItem.kt

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:

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.
Colección de guías rápidas
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.
Colección de guías rápidas
En esta serie de videos, se presentan varias APIs de Compose y se muestra rápidamente lo que está disponible y cómo usarlo.
Colección de guías rápidas

Si tienes preguntas o comentarios

Ve a nuestra página de preguntas frecuentes para obtener información sobre las guías rápidas o comunícate con nosotros para contarnos tu opinión.
Ir a las Preguntas frecuentes Enviar comentarios