LazyVerticalGrid จะแสดงรายการในคอนเทนเนอร์ที่เลื่อนได้ในแนวตั้งซึ่งครอบคลุมหลายคอลัมน์

การใช้กริดนั้นง่ายมาก มันเกือบจะเหมือนกับการใช้คอลัมน์สันหลังยาว โดยมีคำอธิบายเพิ่มเติมสำหรับคอลัมน์กริดแนวตั้ง

การใช้ Jetpack Compose คุณสามารถทำได้ด้วยโค้ดสองสามบรรทัด มาดูวิธีทำกัน:

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

      
                

                    
                    
                
            

เราสามารถกำหนดช่วงเอง

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

อยู่ในการติดต่อ

• ลิงค์อิน