Lớp phủ phần tử trên giao diện người dùng bằng Lưới

API Grid của Jetpack Compose được thiết kế cho bố cục màn hình hai chiều, có cấu trúc. Không giống như lưới tải từng phần (được tối ưu hoá cho các tập dữ liệu lớn), Grid cho phép bạn xác định cấu trúc bố cục thích ứng hoặc cố định bằng cách sử dụng các dải (hàng và cột), khoảng trống và vùng lưới. Bạn đặt các mục vào cấu trúc này bằng cách sử dụng Modifier.gridItem. Thao tác này giúp bạn kiểm soát rõ ràng vị trí và phạm vi trong vùng chứa lưới.

Khi giao diện người dùng yêu cầu nhiều mục trong cùng một vùng lưới hoặc các vùng chồng chéo (chẳng hạn như lớp phủ huy hiệu, chỉ báo trạng thái hoặc thẻ xếp lớp), thì sự mơ hồ về toạ độ có thể khiến hành vi bố cục trở nên khó lường. Việc quản lý chiều sâu của các thành phần chồng chéo mà không cần lồng ghép Box phức tạp hoặc bù trừ toạ độ theo cách thủ công là điều cần thiết để duy trì mã bố cục rõ ràng, dễ đọc.

Các phương pháp hay nhất

• Thứ tự khai báo: Grid tuân theo thứ tự zIndex chuẩn dựa trên thứ tự khai báo trong khối Grid. Các mục được khai báo sau trong khối nội dung Grid sẽ được hiển thị phía trên các mục được khai báo trước đó.
• Kiểm soát chỉ mục z rõ ràng: Sử dụng Modifier.zIndex nếu bạn cần kiểm soát rõ ràng hoặc ghi đè thứ tự vẽ mặc định của các phần tử chồng chéo.
• Vùng được đặt tên so với lớp phủ mục: Sử dụng Grid và các vùng được đặt tên để xác định cấu trúc của bố cục, nhưng hãy giữ logic lớp phủ phức tạp bên trong gridItem cụ thể nếu các lớp phủ đó được liên kết một cách logic với ô lưới đó.
• Khoảng cách có chủ đích cho lớp phủ: Khi phủ lớp, hãy đảm bảo rằng các tham số rowSpan và columnSpan được đặt có chủ đích cho các phần tử chồng chéo để kiểm soát mức độ che khuất nội dung bên dưới.

Nguyên liệu

• Grid: Vùng chứa bố cục hai chiều, có cấu trúc
• GridConfigurationScope.area: Hàm phạm vi dùng để xác định các vùng được đặt tên và vùng phủ trên các dải lưới
• Modifier.gridItem: Đối tượng sửa đổi dùng để đặt và kéo dài các thành phần kết hợp trên các dải lưới hoặc vào các vùng lưới được đặt tên
• Modifier.zIndex: Đối tượng sửa đổi dùng để kiểm soát rõ ràng thứ tự vẽ và độ cao của lớp

Các bước

Định cấu hình bố cục lưới và các vùng được đặt tên, đặt nội dung lớp cơ sở trong toạ độ lưới mục tiêu và đặt các phần tử lớp phủ trong các ô lưới dùng chung hoặc các vùng chồng chéo.

1. Xác định cấu hình lưới

Tạo một cấu hình composable Grid chỉ định các dải hàng và cột, cũng như các vùng được đặt tên trải dài trên các ô để xác định vùng lớp phủ:

enum class Areas { BASE, OVERLAY }

val gridConfig: GridConfigurationScope.() -> Unit = {
    repeat(3) {
        column(GridTrackSize.Fixed(100.dp))
    }
    row(GridTrackSize.Fixed(100.dp))

    area(areaId = Areas.BASE, row = 1, column = 1, columnSpan = 2)
    // Define a named area spanning multiple columns that overlaps other cells
    area(areaId = Areas.OVERLAY, row = 1, column = 2, columnSpan = 2)
}
GridByExamples.kt

2. Đặt nội dung cơ sở và khai báo lớp phủ

Đặt các thành phần kết hợp cơ sở vào các ô lưới bằng Modifier.gridItem. Grid tuân theo thứ tự zIndex chuẩn dựa trên thứ tự kết hợp, vì vậy, các mục được khai báo sau trong khối Grid sẽ được vẽ lên trên các mục trước đó. Khi đặt lớp phủ trong cùng một ô hoặc vùng chồng chéo, hãy khai báo thành phần kết hợp lớp phủ sau phần tử cơ sở hoặc tham chiếu đến một vùng được đặt tên. Bạn có thể sử dụng Modifier.zIndex nếu cần kiểm soát hoặc ghi đè thứ tự vẽ mặc định này một cách rõ ràng.

Grid(
    config = gridConfig,
) {
    // Base Layer
    TextCard("BASE", Modifier.gridItem(areaId = Areas.BASE))
    // Overlay Layer
    TextCard(
        "OVERLAY",
        Modifier.gridItem(areaId = Areas.OVERLAY),
        color = Color(0xDD4B608D)
    )
}
GridByExamples.kt

Kết quả

Các phần tử trên giao diện người dùng của bạn phủ lên nhau theo cách có thể dự đoán được trong cấu trúc lưới 2D. Bằng cách dựa vào thứ tự khai báo chuẩn, bạn sẽ tránh được các vùng chứa lồng nhau phức tạp trong khi vẫn duy trì mã bố cục rõ ràng, thích ứng.

Hình 1. Các phần tử trên giao diện người dùng chồng chéo trong Lưới Compose.