Desplazamiento anidado con Jetpack Compose | por Syntia | enero 2023

Foto de Jonathan Ridley en UnsplashJetpack Compose aumenta la productividad de los desarrolladores en las vistas, especialmente cuando se trata de RecyclerView y adaptadores. solo tenemos que

• definir un elemento componible (LazyRow/LazyColumn),
• Especifique los artículos y componentes para cada artículo,
• … ¡Sí, eso es todo!

También hay otros elementos componibles como Fila y Columna. En este artículo, veremos algunos casos de uso de Row/Column, LazyRow/LazyColumn y cómo se maneja la acción de desplazamiento en ellos.

Descargo de responsabilidad: todo el código fuente que se proporciona aquí se desarrolló utilizando el lanzamiento de artefactos de Compose Bom de diciembre de 2022. Tenga en cuenta que algunos códigos fuente pueden cambiar con las nuevas versiones.

fila columna

Diseños básicos de composición (columna y fila) Fila/Columna se puede utilizar para organizar algunas vistas con una orientación específica (horizontal o vertical). En otras palabras, podemos tratar Fila/Columna como LinearLayout en XML. La diferencia es que el desplazamiento se puede establecer directamente en el modificador Fila/Columna usando verticalScroll u horizontalScroll.

LazyRow/LazyColumn

Compose proporciona LazyRow/LazyColumn para reemplazar RecyclerView en XML. Utilice estos componentes cuando:

1. Muestre elementos con tamaños desconocidos/grandes usando la API items() en LazyRow/LazyColumn (LazyListScope).
2. Solo componga y aplique estilo a los elementos que son visibles en la ventana gráfica del componente (el mismo principio que RecyclerView).

Desplazamiento anidado con elementos anidados

Tomemos un ejemplo: la pantalla de inicio de Instagram. La pantalla es desplazable con publicaciones infinitas. También hay un desplazamiento horizontal en el área de la historia.En Instagram, generalmente primero agregamos una columna para encerrar la historia y la sección de publicación como una barra de desplazamiento vertical. Luego use LazyRow y LazyColumn para cada sección como se muestra a continuación. Cuando intentamos obtener una vista previa de los resultados, obtenemos un error de Android Studio que nos impide crear pergaminos anidados con la misma orientación sin una altura/anchura fija. El sistema de vista predeterminado (XML) es similar a agregar un RecyclerView dentro de un NestedScrollView. Puede degradar el rendimiento de la aplicación al omitir la capacidad del reciclador cuando se encuentra dentro de un scroll.java.lang.IllegalStateException anidado: el componente desplazable verticalmente se midió con una restricción de altura máxima infinita, lo cual no está permitido. Una de las razones más comunes es el anidamiento de diseños como LazyColumn y Column(Modifier.verticalScroll()). Si desea agregar un encabezado antes de la lista de elementos, agregue un encabezado como un elemento separado () antes del elemento principal () dentro del área LazyColumn. Podría haber otras razones para esto: su ComposeView se agregó a un LinearLayout con algo de peso, aplicó Modifier.wrapContentSize (ilimitado = verdadero) o escribió un diseño personalizado. Intente eliminar la fuente de restricciones infinitas en la jerarquía sobre el contenedor de desplazamiento. en androidx.compose.foundation.CheckScrollableContainerConstraintsKt.checkScrollableContainerConstraints-K40F9xA(CheckScrollableContainerConstraints.kt:35) en androidx.compose.foundation.lazy.LazyListKt$rememberLazyListMeasurePolicy$1$1.invoke-0kLqBqw(LazyList.kt:192) en .android .com .LazyListKt$rememberLazyListMeasurePolicy$1$1.invoke(LazyList.kt:191) en androidx.compose.foundation.lazy.layout.LazyLayoutKt$LazyLayout$1$2$1.invoke-0kLqBqw(LazyLayout.kt:71) ….. Para lograr un desplazamiento anidado, en lugar de crear una nueva LazyColumn dentro de una columna, debemos envolver todos los elementos componibles directamente dentro de la LazyColumn principal como se muestra a continuación. El concepto es similar a ConcatAdapter. Y el resultado es… ¡Tadaaa! Los rollos anidados funcionan tanto horizontal como verticalmente.Finalmente, dado que el caso de uso es común, creemos un componente componible general para que sea reutilizable. El código fuente completo de los resultados se puede ver a continuación. Codificación feliz.