Audiocurso Jetpack Compose 9 LazyVerticalGrid

jetpack compose lazyverticalgrid

Audiocurso Jetpack Compose 9 LazyVerticalGrid

Y ahora le toca el turno al LazyVerticalGrid de Jetpack Compose. Nos sirve para mostrar un listado de elementos visualizados en cuadrícula que pueden ser scrolleados verticalmente.

Este contenido está restringido.
HAZTE PREMIUM
para difrutar de los audios y vídeos exclusivos.

Este componente es muy útil en situaciones en las que necesitamos mostrar muchos elementos en pantalla y queremos que el usuario pueda navegar a través de ellos de forma eficiente. El LazyVerticalGrid nos permite definir el número de columnas que deseamos mostrar, así como la forma en que se distribuyen los elementos dentro de cada columna.

Además, al igual que otros componentes de Jetpack Compose, el LazyVerticalGrid nos permite personalizar la apariencia de cada elemento de la cuadrícula y también manejar interacciones de usuario, como clics y gestos de desplazamiento.

Algunos de los casos de uso más comunes son la visualización de imágenes, productos de la app de una tienda, o elementos de una lista que se dividen en categorías. En general, cualquier situación en la que tengamos muchos elementos para mostrar y queramos hacerlo de manera organizada y eficiente.

Y al ser tan similar al LazyHorizontalGrid, podemos prácticamente saltarnos casi todo.

En lugar de controlar el número de items con rows, se usa columns.

Y por el resto, todo muy similar.

El composable por dentro tiene estos parámetros:

@Composable fun LazyVerticalGrid(     columns: GridCells,     modifier: Modifier = Modifier,     state: LazyGridState = rememberLazyGridState(),     contentPadding: PaddingValues = PaddingValues(0.dp),     reverseLayout: Boolean = false,     verticalArrangement: Arrangement.Vertical =         if (!reverseLayout) Arrangement.Top else Arrangement.Bottom,     horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,     flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),     userScrollEnabled: Boolean = true,     content: LazyGridScope.() -> Unit )

Puedes ir a la documentación de Google, para indagar más.

En la siguiente entrega del audiocurso, empezaremos a ver cómo gestionar el estado en Jetpack Compose.

Publicado: 2022-12-01 Actualizado: 2023-08-05