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 chậm (được tối ưu hoá cho các tập dữ liệu lớn), Grid cho phép bạn xác định một cấu trúc bố cục cố định hoặc có khả năng thích ứng bằng cách sử dụng các đường (hàng và cột), khoảng trống và các 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, cho phép bạn kiểm soát rõ ràng việc định vị và trải rộng trong vùng chứa lưới.

Khi giao diện người dùng của bạn 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), sự mơ hồ về toạ độ có thể khiến hành vi bố cục trở nên khó đoán. Việc quản lý độ sâu của các thành phần chồng chéo mà không cần dùng đến tính năng lồng ghép Box phức tạp hoặc độ lệch toạ độ 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 tiêu 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 kết xuất ở trên cùng của các mục được khai báo trước đó.
• Kiểm soát chỉ mục z một cách tường minh: Sử dụng Modifier.zIndex nếu bạn cần kiểm soát hoặc ghi đè một cách tường minh thứ tự vẽ mặc định của các phần tử chồng lên nhau.
• Vùng có tên so với lớp phủ mục: Sử dụng Grid và các vùng có tên để xác định cấu trúc bố cục, nhưng giữ logic lớp phủ phức tạp bên trong gridItem cụ thể nếu những lớp phủ đó được liên kết một cách hợp lý với ô lưới đó.
• Khoảng thời gian cố ý cho lớp phủ: Khi phủ lớp, hãy đảm bảo rằng các tham số rowSpan và columnSpan là cố ý cho các phần tử chồng lên nhau để kiểm soát mức độ che khuất nội dung cơ bản.

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à các vùng lớp phủ trên các đường lưới
• Modifier.gridItem: Đối tượng sửa đổi dùng để đặt và trải rộng các thành phần kết hợp trên các đường lưới hoặc vào các vùng lưới có 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, định vị 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ủ vào 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 thành phần kết hợp Grid chỉ định các hàng và cột, cũng như các vùng được đặt tên trải rộng trên các ô để xác định các 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ơ bản vào các ô lưới bằng cách sử dụng Modifier.gridItem. Grid tuân theo thứ tự zIndex tiêu chuẩn dựa trên thứ tự thành phần, vì vậy, các mục được khai báo sau trong khối Grid sẽ được vẽ ở trên cùng của các mục trước đó. Khi đặt một lớp phủ trong cùng một ô hoặc một 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ên. Bạn có thể sử dụng Modifier.zIndex nếu cần kiểm soát hoặc ghi đè rõ ràng thứ tự vẽ mặc định này.

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 sẽ phủ lên một 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 tiêu 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 và có khả năng thích ứng.