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.

Los miembros de "Los androides Premium" escuchan contenido adicional en audio sobre este artículo... ¡y otros más de 100!

Suena muy bien

Hay que suscribirse para disfrutar de todo el contenido premium desde la web y la app, así como participar en las actividades premium: videoconferencias y canales premium en Discord.

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