Tạo lưới có thể cuộn

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)
        }
    }
}
LazyListSnippets.kt

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.
  • 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.
  • items(itemsList) thêm itemsList vào LazyHorizontalGrid. Hàm lambda hiển thị một thành phần kết hợp Text 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ào LazyHorizontalGrid, trong khi lambda hiển thị một thành phần kết hợp Text 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ả

Hình 1. Lưới có thể cuộn theo chiều ngang bằng 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:

Danh sách và lưới cho phép ứng dụng của bạn hiển thị các bộ sưu tập ở dạng hình ảnh dễ nhìn và dễ sử dụng cho người dùng.
Bộ sưu tập hướng dẫn nhanh
Tìm hiểu cách các hàm có khả năng kết hợp giúp bạn dễ dàng tạo các thành phần giao diện người dùng đẹp mắt dựa trên hệ thống thiết kế Material Design.
Bộ sưu tập hướng dẫn nhanh
Loạt video này giới thiệu nhiều API Compose, giúp bạn nhanh chóng nắm được các API có sẵn và cách sử dụng các API đó.
Bộ sưu tập hướng dẫn nhanh

Bạn có câu hỏi hoặc ý kiến phản hồi

Truy cập vào trang câu hỏi thường gặp để tìm hiểu về các hướng dẫn nhanh hoặc liên hệ với chúng tôi để cho chúng tôi biết suy nghĩ của bạn.
Chuyển đến phần Câu hỏi thường gặp Để lại ý kiến phản hồi