Grade

Grid é uma API do Jetpack Compose que permite implementar um layout bidimensional de forma flexível. Com essa API, é possível mostrar itens em layouts de várias colunas ou linhas que se adaptam ao tamanho do contêiner disponível.

Um layout bidimensional flexível e adaptável com Grid
Figura 1. Um layout bidimensional flexível e adaptável com Grid.

Qual é a diferença entre a grade e outros elementos combináveis semelhantes?

O Compose já oferece componentes semelhantes, como LazyVerticalGrid. Esses componentes são usados principalmente para a visualização de conjuntos de dados grandes e homogêneos, como um catálogo de conteúdo em um app de streaming de vídeo. Eles NÃO foram projetados para o layout estrutural de uma tela ou componente complexo.

Também é possível implementar um layout bidimensional combinando vários elementos combináveis Row e Column. No entanto, essa abordagem tem algumas desvantagens, como hierarquias profundas e dificuldades de adaptabilidade.

A tabela a seguir mostra quais layouts são adequados para cada API:

Componente Finalidade
LazyVerticalGrid, LazyStaggeredGrid, LazyHorizontalGrid Visualização de conjuntos de dados grandes e homogêneos que exigem carregamento lento.
Row, Column, FlexBox Layout unidimensional
Grid Layout bidimensional

Terminologia

Familiarize-se com a terminologia a seguir para entender como o Grid funciona.

Linha de grade

Uma grade é composta por linhas horizontais e verticais. Se a grade tiver três linhas, ela terá quatro linhas horizontais, incluindo a que fica depois da última linha. Na imagem a seguir, cada linha pontilhada representa uma linha de grade:

A grade consiste em quatro linhas horizontais e três verticais.
Figura 2. A grade consiste em quatro linhas horizontais e três verticais.

Faixa de grade

Uma faixa de grade é o espaço entre duas linhas de grade. Uma faixa de linha fica entre duas linhas horizontais, e uma faixa de coluna fica entre duas linhas verticais. Para definir o tamanho dessas faixas, atribua um tamanho a elas ao criar a grade.

Uma faixa de grade para a primeira linha.
Figura 3. Uma faixa de grade para a primeira linha.

Célula de grade

Uma célula de grade é a interseção de uma faixa de linha e coluna.

Uma célula de grade que é uma interseção da segunda linha e da segunda coluna.
Figura 4. Uma célula de grade que é uma interseção da segunda linha e da segunda coluna.

Área da grade

Uma área de grade consiste em várias células de grade. É possível definir uma área de grade fazendo com que um item se estenda por várias faixas.

Uma área de grade que consiste em quatro células de grade.
Figura 5. Uma área de grade que consiste em quatro células de grade.

Espaço da grade

Um espaçamento de grade é o espaço entre as faixas da grade. Não é possível colocar um elemento da interface em um espaço, mas é possível estender um elemento da interface por ele.

Um espaço de grade entre a primeira e a segunda coluna.
Figura 6. Um espaço de grade entre a primeira e a segunda coluna.