Grade

Observação: Grid é uma API experimental e está sujeita a mudanças. Registre todos os problemas no Issue Tracker.

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

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

Como o Grid é diferente de elementos combináveis semelhantes?

O Compose já oferece componentes semelhantes, como LazyVerticalGrid. Esses componentes são destinados principalmente à visualização de conjuntos de dados grandes e homogêneos, por exemplo, para mostrar um catálogo de conteúdo em um app de streaming de vídeo. Eles NÃO são 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 oferece uma visão geral de 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

Observação: Grid não oferece suporte ao carregamento lento.

Terminologia

Conheça a terminologia a seguir para entender como 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 está após a última linha. Na imagem a seguir, cada linha pontilhada representa uma linha de grade:

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.

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 uma faixa de coluna.

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

Área de 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 abranja várias faixas.

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

Espaço da grade

Um espaço da grade é a calha entre as faixas da grade. Não é possível colocar um elemento da interface em um espaço, mas é possível abranger um elemento da interface.

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