Audiocurso Jetpack Compose 8 LazyHorizontalGrid

jetpack compose lazyhorizontalgrid

Audiocurso Jetpack Compose 8 LazyHorizontalGrid

Continuamos con los listados. Con LazyHorizontalGrid vamos a poder mostrar un listado de elementos visualizados en cuadrícula que puedan ser scrolleados horizontalmente.

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

Si bien lo más común es hacerlo en vertical, continuamos con este composable por ser coherentes con como venimos viendo esto:

  • Row / Column
  • Horizontal / Vertical

De hecho, lo primero que estuvo disponible para ser empleado fue el LazyVerticalGrid.

Pero vamos al lío:

En los LazyHorizontalGrid, el parámetro que controla el número de items que vamos a mostrar en la cuadrícula, es rows.

Por ejemplo, para indicar que cada item tiene que tener como mínimo 128.dp de ancho y alto sería así:

GridCells.Adaptive(minSize = 128.dp)

Aunque también podríamos querer un tamaño fijo de items. 3, por ejemplo:

GridCells.Fixed(3)

Con lo cual tendríamos 3 filas ocupando el alto del contenedor del LazyHorizontalGrid.

Otro de los parámetros que probablemente quieras setear es el contentPadding. Que como te estarás imaginando, sirve para darle padding a los items dentro del grid.

PaddingValues(2.dp)

Si lo que queremos es controlar es la distancia entre items, lo haremos mediante el horizontalArrangement y verticalArrangement.

Arrangement.spacedBy(4.dp)

Y como ver cada uno de estos parámetros por separado, puede hacer que nos falte un poco de contexto, vamos a ver un ejemplo de todo esto aplicado:

LazyHorizontalGrid(     rows = GridCells.Fixed(3),     horizontalArrangement = Arrangement.spacedBy(4.dp),     verticalArrangement = Arrangement.spacedBy(8.dp) ) { 	// ... }

El composable por dentro es este:

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

Y hasta aquí este componente. En la próxima entrega del audiocurso, tocaremos la versión vertical de este.

Publicado: 2022-11-24 Actualizado: 2023-08-05