LazyVerticalGrid sẽ hiển thị các mục của nó trong vùng chứa có thể cuộn theo chiều dọc kéo dài qua nhiều cột.

Việc sử dụng lưới thực sự đơn giản, nó trông gần giống với cách sử dụng cột lười biếng, với phần mô tả bổ sung cho các cột lưới dọc.

Sử dụng Jetpack Compose, bạn có thể làm điều đó với một vài dòng mã. Vì vậy, hãy xem làm thế nào để làm điều đó:

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

      
                

                    
                    
                
            

Chúng tôi có thể xác định các khoảng tùy chỉnh

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

Giữ liên lạc

• LinkedIn