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 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 principalmente para visualização de conjuntos de dados grandes e homogêneos, por exemplo, 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 mostra 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
Familiarize-se com a seguinte terminologia para entender como o Grid funciona.
Linha de grade
Uma grade é formada 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:
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 linha e uma 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 abranja várias faixas.
Espaçamento 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 uma lacuna, mas é possível abranger um elemento da interface nela.
