Criar uma grade rolável

É 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)
        }
    }
}
LazyListSnippets.kt

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.
  • A propriedade rows especifica como organizar o conteúdo da grade.
    • Para uma grade vertical, use a propriedade columns para especificar o arranjo.
  • items(itemsList) adiciona itemsList a LazyHorizontalGrid. A lambda renderiza um elemento combinável Text para cada item e define o texto como a descrição do item.
  • item() adiciona um único item a LazyHorizontalGrid, enquanto a lambda renderiza um único elemento combinável Text de maneira semelhante a items().
  • 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

Figura 1. Uma grade horizontal rolável usando 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:

As listas e as grades permitem que o app exiba coleções de uma forma agradável e fácil de consumir.
Coletânea de guias rápidos
Aprenda como as funções combináveis podem permitir que você crie componentes de interface bonitos com base no sistema de design do Material Design.
Coletânea de guias rápidos
Esta série de vídeos apresenta várias APIs do Compose, mostrando rapidamente o que está disponível e como usá-las.
Coletânea de guias rápidos

Tem dúvidas ou feedback?

Acesse a página de perguntas frequentes e saiba mais sobre os guias rápidos ou entre em contato e conte o que você pensa.
Acessar as perguntas frequentes Enviar feedback