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 có sẵn.
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, chẳng hạn như 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à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 cho 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 từng phần. |
Row, Column, FlexBox |
Bố cục một chiều |
Grid |
Bố cục hai chiều |
Thuật ngữ
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 thẳng chạy theo chiều ngang và chiều dọc. Nếu lưới của bạn có 3 hàng, thì lưới đó sẽ có 4 đường kẻ ngang, kể cả đường kẻ sau hàng cuối cùng. Trong hình ảnh sau, mỗi đường chấm chấm biểu thị một đường lưới:
Lưới theo dõi
Làn lưới là khoảng trống giữa hai đường lưới. Một hàng nằm giữa hai đường ngang và một cột nằm giữa hai đường dọc. Để xác định kích thước của các đường 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 làm cho một mục trải rộng trên nhiều đường.
Khoảng trống giữa các lưới
Khoảng trống lưới là khoảng cách giữa các đường lưới. Bạn không thể đặt một phần tử trên giao diện người dùng vào một khoảng trống, nhưng bạn có thể trải rộng một phần tử trên giao diện người dùng trên khoảng trống đó.
