Cuadrícula

Grid es una API de Jetpack Compose que te permite implementar un diseño bidimensional de forma flexible. Con esta API, puedes mostrar elementos en diseños de varias columnas o filas que se adaptan al tamaño del contenedor disponible.

Cómo crear un diseño bidimensional flexible y adaptable con Grid
Figura 1. Un diseño bidimensional flexible y adaptable con Grid

¿En qué se diferencia Grid de otros elementos componibles similares?

Compose ya ofrece componentes similares, como LazyVerticalGrid. Estos componentes se usan principalmente para visualizar 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 de 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 cuadrícula

Una cuadrícula se compone de líneas que se extienden de forma horizontal y vertical. 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 cuadrícula:

La cuadrícula consta de cuatro líneas horizontales y tres verticales.
Figura 2: La cuadrícula consta de cuatro líneas horizontales y tres verticales.

Pista de cuadrícula

Una pista de cuadrícula es el espacio entre dos líneas de cuadrícula. Una pista de fila se encuentra entre dos líneas horizontales, y una pista de columna se encuentra entre dos líneas verticales. Para definir el tamaño de estas pistas, asígnales un tamaño cuando crees la cuadrícula.

Una pista de cuadrícula para la primera fila.
Figura 3. Una pista de cuadrícula para la primera fila.

Celda de cuadrícula

Una celda de cuadrícula es la intersección de una pista de fila y columna.

Una celda de cuadrícula que es una intersección de la segunda fila y la segunda columna.
Figura 4: Una celda de cuadrícula que es una intersección de la segunda fila y la segunda columna.

Área de cuadrícula

Un área de cuadrícula consta de varias celdas de cuadrícula. Puedes definir un área de cuadrícula haciendo que un elemento abarque varias pistas.

Un área de cuadrícula que consta de cuatro celdas de cuadrícula.
Figura 5. Un área de cuadrícula que consta de cuatro celdas de cuadrícula.

Espacio entre cuadrículas

Un espacio de cuadrícula es el margen entre las pistas de cuadrícula. No puedes colocar un elemento de la IU en un espacio, pero puedes extenderlo a lo largo de él.

Un espacio de cuadrícula entre la primera y la segunda columna.
Figura 6. Un espacio de cuadrícula entre la primera y la segunda columna.