Vùng chứa bố cục

Jetpack Compose cung cấp một số vùng chứa bố cục để giúp bạn định cấu trúc và sắp xếp các thành phần giao diện người dùng. Mặc dù các thành phần kết hợp bố cục cơ bản như Row và Column xử lý các cách sắp xếp đơn giản, nhưng nhiều ứng dụng cần có các giải pháp vùng chứa thích ứng và thích nghi hơn khi kích thước màn hình thay đổi và dữ liệu người dùng tăng lên.

Vùng chứa bố cục bao gồm:

• Danh sách tải từng phần và lưới tải từng phần: Các thành phần như LazyColumn, LazyRow và LazyVerticalGrid hiển thị hiệu quả các tập dữ liệu lớn hoặc có kích thước linh động bằng cách chỉ soạn và bố trí các mục hiện hiển thị trong khung nhìn.
• Trình chuyển trang: Các vùng chứa như HorizontalPager và VerticalPager cho phép người dùng vuốt hoặc di chuyển giữa các trang nội dung.
• Bố cục luồng: Vùng chứa một chiều thích ứng (FlowRow và FlowColumn) tự động gói các mục bị tràn vào hàng hoặc cột tiếp theo khi hết không gian.
• Lưới: Cấu trúc hai chiều linh hoạt, 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.
• FlexBox: Một vùng chứa thích ứng lấy cảm hứng từ CSS Flexbox, cung cấp khả năng kiểm soát chi tiết về cách các mục gói, tăng, thu nhỏ và căn chỉnh dọc theo các trục chính và trục chéo để lấp đầy không gian có sẵn.

Chọn vùng chứa bố cục chính xác

Khi tạo bố cục trong Compose, việc chọn giữa vùng chứa bố cục cơ bản và nâng cao hơn phụ thuộc vào thiết kế của bạn, liệu các mục có phải xuống dòng khi không gian bị hạn chế hay không và cách các mục tự động đổi kích thước.

Bảng sau đây tóm tắt các chức năng của từng vùng chứa bố cục 1D trong Compose:

Vùng chứa	Xuống dòng cho các mục	Tăng trưởng theo từng mặt hàng	Thu nhỏ từng mục	Kích thước ban đầu của mỗi mục	Các mục mở rộng để lấp đầy không gian có sẵn trên nhiều dòng	Sắp xếp lại các mục	Tải chậm	Phù hợp nhất cho:
Hàng / Cột	❌	✅ (qua weight) chỉ một dòng	❌	❌	❌	❌	❌	Các hàng đồng nhất có một số lượng nhỏ các mục cố định. Các mục nằm trong giới hạn có sẵn và không cần xuống dòng.
FlowRow / FlowColumn	✅	Hạn chế	❌	❌	Từng phần	❌	❌	Đã được thay thế bằng FlexBox.
LazyRow / LazyColumn	❌	❌	❌	❌	❌	❌	✅	Danh sách mục dài hoặc vô hạn, trong đó chỉ cần hiển thị các mục hiển thị để tối ưu hoá hiệu suất. Tập dữ liệu động hoặc lớn cuộn theo một hướng.
FlexBox	✅	✅	✅	✅	✅	✅	❌	Bố cục yêu cầu khả năng thích ứng, chẳng hạn như chỉ định kích thước ban đầu, tăng/giảm mục động (grow/shrink), sắp xếp lại hình ảnh (order) hoặc căn chỉnh trục chéo ở cấp mục (alignSelf). Sắp xếp các mục có kích thước khác nhau.

Bảng sau đây tóm tắt các chức năng của Grid và các thành phần kết hợp tương tự khác:

Vùng chứa	Căn chỉnh 2D nghiêm ngặt	Mục trải dài (cột)	Mục kéo dài (hàng)	Tải chậm	Phù hợp nhất cho:
Lưới	✅	✅ (thông qua GridArea)	✅	❌	Bố cục hai chiều có cấu trúc, trong đó tất cả các mục đều nằm trên màn hình và cần căn chỉnh rõ ràng theo chiều ngang và chiều dọc. Tái cấu trúc bố cục một cách thích ứng trên nhiều kích thước màn hình.
LazyVerticalGrid	✅	✅ (thông qua span)	❌	✅	Nguồn cấp dữ liệu cuộn dọc và danh mục lớn cần có cột.
LazyStaggeredGrid	❌ (chỉ 1D)	Một phần (chỉ nhịp toàn phần)	❌	✅	Cuộn nguồn cấp dữ liệu có các mục có chiều cao khác nhau.
LazyHorizontalGrid	✅	❌	✅	✅	Băng chuyền cuộn ngang hoặc dữ liệu được phân trang nhiều hàng.
Kết hợp hàng và cột	❌	❌	❌	❌	Tập hợp thành phần đơn giản, chẳng hạn như đặt nhãn văn bản bên cạnh biểu tượng.