LazyVerticalGrid zeigt seine Elemente in einem vertikal scrollbaren Container an, der sich über mehrere Spalten erstreckt.

Die Verwendung eines Rasters ist wirklich einfach, es sieht fast genauso aus wie die Verwendung einer Lazy-Spalte, mit einer zusätzlichen Beschreibung für die vertikalen Rasterspalten.

Mit Jetpack Compose können Sie dies mit ein paar Codezeilen tun. Sehen wir uns also an, wie das geht:

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

      
                

                    
                    
                
            

Wir können benutzerdefinierte Bereiche definieren

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

In Kontakt bleiben

• LinkedIn