Bạn có thể quản lý các tập dữ liệu lớn và nội dung động bằng lưới tải lười, giúp cải thiện hiệu suất của ứng dụng. Với các thành phần kết hợp lưới tải từng phần, bạn có thể hiển thị các mục trong một vùng chứa có thể cuộn, trải dài trên nhiều cột hoặc hàng.
Khả năng tương thích của phiên bản
Phương thức triển khai này yêu cầu bạn phải đặt minSDK của dự án thành API cấp 21 trở lên.
Phần phụ thuộc
Quyết định hướng lưới
Các thành phần kết hợp LazyHorizontalGrid
và LazyVerticalGrid
hỗ trợ việc hiển thị các mục trong lưới. Lưới dọc tải từng phần (lazy) hiển thị các mục thuộc lưới đó trong một vùng chứa có thể cuộn theo chiều dọc, kéo dài qua nhiều cột, còn lưới ngang tải từng phần cũng hoạt động tương tự nhưng theo chiều ngang.
Tạo lưới có thể cuộn
Mã sau đây tạo một lưới cuộn theo chiều ngang có ba cột:
@Composable fun ScrollingGrid() { val itemsList = (0..15).toList() val itemModifier = Modifier .border(1.dp, Color.Blue) .width(80.dp) .wrapContentSize() LazyHorizontalGrid( rows = GridCells.Fixed(3), horizontalArrangement = Arrangement.spacedBy(16.dp), verticalArrangement = Arrangement.spacedBy(16.dp) ) { items(itemsList) { Text("Item is $it", itemModifier) } item { Text("Single item", itemModifier) } } }
Các điểm chính về mã
- Thành phần kết hợp
LazyHorizontalGrid
xác định hướng ngang của lưới.- Để tạo lưới dọc, hãy sử dụng
LazyVerticalGrid
.
- Để tạo lưới dọc, hãy sử dụng
- Thuộc tính
rows
chỉ định cách sắp xếp nội dung lưới.- Đối với lưới dọc, hãy sử dụng thuộc tính
columns
để chỉ định cách sắp xếp.
- Đối với lưới dọc, hãy sử dụng thuộc tính
items(itemsList)
thêmitemsList
vàoLazyHorizontalGrid
. Hàm lambda hiển thị một thành phần kết hợpText
cho mỗi mục và đặt văn bản thành nội dung mô tả mục.item()
thêm một mục vàoLazyHorizontalGrid
, trong khi lambda hiển thị một thành phần kết hợpText
duy nhất theo cách tương tự nhưitems()
.GridCells.Fixed
xác định số hàng hoặc cột.Để tạo lưới có nhiều hàng nhất có thể, hãy đặt số lượng hàng bằng cách sử dụng
GridCells.Adaptive
.Trong mã sau, giá trị
20.dp
chỉ định rằng mỗi cột phải có chiều rộng tối thiểu là 20.dp và tất cả các cột đều có chiều rộng bằng nhau. Nếu màn hình rộng 88 dp, thì sẽ có 4 cột, mỗi cột rộng 22 dp.
Kết quả
LazyHorizontalGrid
.Các bộ sưu tập chứa hướng dẫn này
Hướng dẫn này là một phần của các bộ sưu tập Hướng dẫn nhanh được tuyển chọn này, bao gồm các mục tiêu phát triển Android rộng hơn:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=vi)
Hiển thị danh sách hoặc lưới
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=vi)
Hiển thị các thành phần tương tác
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=vi)