Audiocurso Jetpack Compose 8 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.

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 de Jetpack Compose. En la próxima entrega del audiocurso, tocaremos la versión vertical de este.