LazyVerticalGrid exibirá seus itens em um contêiner rolável verticalmente em várias colunas.

O uso de uma grade é realmente simples, parece quase idêntico ao uso de uma coluna preguiçosa, com uma descrição adicionada para as colunas de grades verticais.

Usando o Jetpack Compose, você pode fazer isso com algumas linhas de código. Então vamos ver como fazer isso:

@Composable
fun GridItem(title: String, modifier: Modifier = Modifier) {
    Text(
        text = title,
        textAlign = TextAlign.Center,
        modifier = modifier
            .fillMaxWidth()
            .background(whiteColor)
            .wrapContentWidth(),
        color = MaterialTheme.colorScheme.primary
    )
}
LazyVerticalGrid(columns = GridCells.Fixed(2)) {
    items(list) { item ->
        GridItem(item)
    }
}

      
                

                    
                    
                
            

LazyVerticalGrid(
    columns = GridCells.Fixed(2),
    verticalArrangement = Arrangement.spacedBy(16.dp),
    horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
    items(list) { item ->
        GridItem(item)
    }
}

      
                

                    
                    
                
            

Podemos definir extensões personalizadas

LazyVerticalGrid(
    columns = GridCells.Fixed(3),
    verticalArrangement = Arrangement.spacedBy(16.dp),
    horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
    items(list.size, span = {GridItemSpan(if(it == 0) 3 else 1)}) { idx ->
        GridItem(list[idx])
    }
}

Manter contato

• LinkedIn