Grid là một API Jetpack Compose giúp bạn triển khai bố cục hai chiều một cách linh hoạt.
Với API này, bạn có thể hiển thị các mục trong bố cục nhiều cột hoặc nhiều hàng, thích ứng với kích thước vùng chứa hiện có.
Grid.
Lưới khác với các thành phần kết hợp tương tự như thế nào?
Compose đã cung cấp các thành phần tương tự, chẳng hạn như LazyVerticalGrid.
Các thành phần này chủ yếu dùng để trực quan hoá các tập dữ liệu lớn, đồng nhất, chẳng hạn như hiển thị danh mục nội dung trong ứng dụng phát trực tuyến video. Các thành phần này KHÔNG được thiết kế cho bố cục cấu trúc của màn hình hoặc thành phần phức tạp.
Bạn cũng có thể triển khai bố cục hai chiều bằng cách kết hợp nhiều thành phần kết hợp Row và Column.
Tuy nhiên, phương pháp này có một số nhược điểm, chẳng hạn như hệ phân cấp sâu và khó thích ứng.
Bảng sau đây cung cấp thông tin tổng quan về bố cục phù hợp với từng API:
| Thành phần | Mục đích |
|---|---|
LazyVerticalGrid, LazyStaggeredGrid, LazyHorizontalGrid |
Trực quan hoá các tập dữ liệu lớn, đồng nhất cần tải chậm. |
Row, Column, FlexBox |
Bố cục một chiều |
Grid |
Bố cục hai chiều |
Thuật ngữ
Hãy làm quen với các thuật ngữ sau để hiểu cách hoạt động của Grid.
Đường lưới
Lưới được tạo thành từ các đường chạy theo chiều ngang và chiều dọc. Nếu lưới có 3 hàng, thì lưới đó sẽ có 4 đường ngang, bao gồm cả đường sau hàng cuối cùng. Trong hình ảnh sau, mỗi đường chấm chấm đại diện cho một đường lưới:
Đường lưới
Đường lưới là khoảng trống giữa hai đường lưới. Một dải hàng nằm giữa hai đường ngang và một dải cột nằm giữa hai đường dọc. Để xác định kích thước của các dải này, hãy chỉ định kích thước cho chúng khi bạn tạo lưới.
Ô lưới
Ô lưới là giao điểm của một hàng và cột.
Vùng lưới
Một vùng lưới bao gồm nhiều ô lưới. Bạn có thể xác định một vùng lưới bằng cách đặt một mục trải dài trên nhiều dải.
Khoảng cách lưới
Khoảng trống lưới là rãnh giữa các dải lưới. Bạn không thể đặt một phần tử trên giao diện người dùng vào khoảng trống, nhưng có thể kéo dài một phần tử trên giao diện người dùng qua khoảng trống đó.
