É possível gerenciar grandes conjuntos de dados e conteúdo dinâmico com grids lentos, melhorando a performance do app. Com elementos combináveis de grade lenta, você pode mostrar itens em um contêiner rolável, dividido em várias colunas ou linhas.
Compatibilidade de versões
Essa implementação exige que o minSDK do projeto seja definido como nível 21 da API ou mais recente.
Dependências
Decidir a orientação da grade
Os elementos combináveis LazyHorizontalGrid
e LazyVerticalGrid
oferecem
suporte para a exibição de itens em uma grade. Uma grade vertical lenta mostra os itens
em um contêiner de rolagem vertical, dividido em várias colunas, enquanto
grades horizontais lentas têm o mesmo comportamento no eixo horizontal.
Criar uma grade rolável
O código abaixo cria uma grade de rolagem horizontal com três colunas:
@Composable fun ScrollingGrid() { val itemsList = (0..15).toList() val itemModifier = Modifier .border(1.dp, Color.Blue) .width(80.dp) .wrapContentSize() LazyHorizontalGrid( rows = GridCells.Fixed(3), horizontalArrangement = Arrangement.spacedBy(16.dp), verticalArrangement = Arrangement.spacedBy(16.dp) ) { items(itemsList) { Text("Item is $it", itemModifier) } item { Text("Single item", itemModifier) } } }
Pontos principais sobre o código
- O elemento combinável
LazyHorizontalGrid
determina a orientação horizontal da grade.- Para criar uma grade vertical, use
LazyVerticalGrid
.
- Para criar uma grade vertical, use
- A propriedade
rows
especifica como organizar o conteúdo da grade.- Para uma grade vertical, use a propriedade
columns
para especificar o arranjo.
- Para uma grade vertical, use a propriedade
items(itemsList)
adicionaitemsList
aLazyHorizontalGrid
. A lambda renderiza um elemento combinávelText
para cada item e define o texto como a descrição do item.item()
adiciona um único item aLazyHorizontalGrid
, enquanto a lambda renderiza um único elemento combinávelText
de maneira semelhante aitems()
.GridCells.Fixed
define o número de linhas ou colunas.Para criar uma grade com o máximo de linhas possível, defina o número de linhas usando
GridCells.Adaptive
.No código abaixo, o valor
20.dp
especifica que cada coluna tem pelo menos 20.dp e todas as colunas têm larguras iguais. Se a tela tiver 88 dp de largura, haverá 4 colunas de 22 dp cada.
Resultados
LazyHorizontalGrid
.Coleções que contêm este guia
Este guia faz parte destas coleções selecionadas de guias rápidos que abrangem metas mais amplas de desenvolvimento para Android:
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=pt-br)
Mostrar uma lista ou grade
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=pt-br)
Mostrar componentes interativos
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=pt-br)