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.
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 |
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:
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.
Célula de grade
Uma célula de grade é a interseção de uma faixa de linha e uma faixa de 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.
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.
