Grid là một API Jetpack Compose cho phép bạn linh hoạt triển khai bố cục hai chiều.
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.
Grid 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 – ví dụ: hiển thị danh mục nội dung trong một ứ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ột 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 nào 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 yêu cầu tải từng phần. |
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 thuật ngữ sau đây để hiểu cách Grid hoạt động.
Đườ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:
Rãnh lưới
Rãnh lưới là khoảng cách giữa hai đường lưới. Rãnh hàng nằm giữa hai đường ngang và rãnh cột nằm giữa hai đường dọc. Để xác định kích thước của các rãnh 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à rãnh cột.
Vùng lưới
Vùng lưới bao gồm một số ô lưới. Bạn có thể xác định vùng lưới bằng cách tạo một mục trải dài trên nhiều rãnh.
Khoảng cách lưới
Khoảng cách lưới là khoảng cách giữa các rãnh 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 cách, nhưng bạn có thể trải dài một phần tử trên giao diện người dùng qua khoảng cách đó.
