Cuadrícula

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

Un diseño bidimensional flexible y adaptable con cuadrícula
Figura 1. Es un diseño bidimensional flexible y adaptable con 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. 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 Row y Column componibles. 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 Propósito
LazyVerticalGrid, LazyStaggeredGrid, LazyHorizontalGrid Visualización de conjuntos de datos grandes y homogéneos que requiere 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 está formada por líneas que se ejecutan de forma horizontal y vertical. Si tu cuadrícula tiene tres filas, tendrá cuatro líneas horizontales, incluida la que se encuentra 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 líneas verticales.
Figura 2. La cuadrícula consta de cuatro líneas horizontales y tres líneas verticales.

Pista de cuadrícula

Un carril de cuadrícula es el espacio entre dos líneas de cuadrícula. Un segmento de fila se encuentra entre dos líneas horizontales, y un segmento de columna se encuentra entre dos líneas verticales. Para definir el tamaño de estos rieles, asígnales un tamaño cuando crees la cuadrícula.

Es un carril de cuadrícula para la primera fila.
Figura 3: Es un carril de cuadrícula para la primera fila.

Celda de cuadrícula

Una celda de cuadrícula es la intersección de un segmento de fila y un segmento de columna.

Una celda de cuadrícula que es la intersección de la segunda fila y la segunda columna.
Figura 4: Una celda de cuadrícula que es la 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.

Es un área de cuadrícula que consta de cuatro celdas de cuadrícula.
Figura 5: Es un área de cuadrícula que consta de cuatro celdas de cuadrícula.

brecha de red

Un espacio entre celdas 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 extenderlo a través de él.

Es un espacio entre la primera y la segunda columna de la cuadrícula.
Figura 6: Es un espacio entre la primera y la segunda columna de la cuadrícula.