Grid es una API de Jetpack Compose que te permite implementar de manera flexible un diseño bidimensional.
Con esta API, puedes mostrar elementos en diseños de varias columnas o filas que se adaptan al tamaño del contenedor disponible.
Grid.
¿En qué se diferencia Grid de los elementos componibles similares?
Compose ya ofrece componentes similares, como LazyVerticalGrid.
Estos componentes son principalmente para la visualización de conjuntos de datos grandes y homogéneos, por ejemplo, para mostrar un catálogo de contenido en una app de transmisión de video. Estos componentes NO están diseñados para el diseño estructural de una pantalla o un componente complejo.
También puedes implementar un diseño bidimensional combinando varios elementos componibles Row y Column.
Sin embargo, este enfoque tiene algunas desventajas, como jerarquías profundas y dificultades en la adaptabilidad.
En la siguiente tabla, se proporciona una descripción general de los diseños adecuados para cada API:
| Componente | Objetivo |
|---|---|
LazyVerticalGrid, LazyStaggeredGrid, LazyHorizontalGrid |
Visualización de conjuntos de datos grandes y homogéneos que requieren carga diferida |
Row, Column, FlexBox |
Diseño unidimensional |
Grid |
Diseño bidimensional |
Terminología
Familiarízate con la siguiente terminología para comprender cómo funciona Grid.
Línea de la cuadrícula
Una cuadrícula se compone de líneas que se ejecutan horizontal y verticalmente. Si tu cuadrícula tiene tres filas, tiene cuatro líneas horizontales, incluida la que está después de la última fila. En la siguiente imagen, cada línea punteada representa una línea de la cuadrícula:
Pista de la cuadrícula
Una pista de la cuadrícula es el espacio entre dos líneas de la cuadrícula. Una pista de fila está entre dos líneas horizontales, y una pista de columna está entre dos líneas verticales. Para definir el tamaño de estas pistas, asígnales un tamaño cuando crees la cuadrícula.
Celda de cuadrícula
Una celda de cuadrícula es la intersección de una pista de fila y una de columna.
Área de la cuadrícula
Un área de la cuadrícula consta de varias celdas de cuadrícula. Puedes definir un área de la cuadrícula haciendo que un elemento abarque varias pistas.
Espacio de la cuadrícula
Un espacio de la cuadrícula es el espacio entre las pistas de la cuadrícula. No puedes colocar un elemento de la IU en un espacio, pero puedes abarcarlo con un elemento de la IU.
