LazyVerticalGrid affichera ses éléments dans un conteneur à défilement vertical réparti sur plusieurs colonnes.

L'utilisation d'une grille est vraiment simple, elle semble presque identique à l'utilisation d'une colonne paresseuse, avec une description supplémentaire pour les colonnes de grilles verticales.

En utilisant Jetpack Compose, vous pouvez le faire avec quelques lignes de code. Voyons donc comment procéder :

@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)
    }
}

      
                

                    
                    
                
            

Nous pouvons définir des plages personnalisées

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])
    }
}

Reste en contact

• LinkedIn