Jetpack Compose'da tembel ızgara

Jan 31 2023
LazyVerticalGrid, öğelerini birden çok sütuna yayılmış dikey olarak kaydırılabilir bir kapsayıcıda görüntüler. Bir ızgara kullanmak gerçekten basittir, dikey ızgaralar sütunları için ek bir açıklama ile tembel bir sütunun kullanımına neredeyse aynı görünür.

LazyVerticalGrid, öğelerini birden çok sütuna yayılmış dikey olarak kaydırılabilir bir kapsayıcıda görüntüler.

Bir ızgara kullanmak gerçekten basittir, dikey ızgaralar sütunları için ek bir açıklama ile tembel bir sütunun kullanımına neredeyse aynı görünür.

Jetpack Compose'u kullanarak bunu birkaç satır kodla yapabilirsiniz. Öyleyse bunu nasıl yapacağımızı görelim:

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

      
                

Özel açıklıklar tanımlayabiliriz

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

İletişimde Kalın

  • LinkedIn