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.
Los miembros de "Los androides Premium" escuchan contenido adicional en audio sobre este artículo... ¡y otros más de 100!
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.
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.