Bố cục bảng dạng lưới

Công thức này cho thấy cách API Grid cải thiện khả năng đọc mã so với các cấu trúc lồng nhau truyền thống. Bằng cách định cấu hình các thành phần có kích thước tự động, bạn có thể tạo một lưới thích ứng linh động với chiều rộng và chiều cao của ô dựa trên kích thước vốn có của các thành phần kết hợp văn bản.

Trong công thức này, bạn sẽ tạo một bảng bằng API Grid.

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

Sử dụng thành phần kết hợp Grid để cải thiện khả năng đọc và duy trì bảng. Grid giúp bạn kiểm soát chính xác kích thước và căn chỉnh cột trên tất cả các hàng mà không cần đồng bộ hoá chiều rộng theo cách thủ công.

Nguyên liệu

• Grid: Một bố cục có thể kết hợp, đặt các mục trong một lưới hai chiều. Cấu hình bố cục được chỉ định trong tham số lambda config, trong khi các mục nội dung giao diện người dùng được khai báo trong tham số lambda content.
• GridTrackSize.Auto: Chỉ định kích thước tự động của các đường kẻ trong cấu hình lưới dựa trên kích thước nội dung vốn có, ví dụ: column(GridTrackSize.Auto) và row(GridTrackSize.Auto).
• gap(): Định cấu hình khoảng cách giữa các hàng và cột trong GridConfigurationScope, chẳng hạn như gap(row = 8.dp, column = 16.dp).

Các bước

Tạo một bảng so sánh nhiều cột bằng cách sử dụng một bố cục Grid duy nhất với tính năng tự động căn chỉnh cột và điều chỉnh kích thước cho tất cả các mục.

1. Đếm số hàng và cột trong lưới để xác định kích thước của các đường

Trước tiên, hãy đếm số cột và hàng để xác định kích thước của các ô:

• Cột: Số lượng thuộc tính mà bạn đang so sánh, cộng thêm một cột cho tên mặt hàng.
• Hàng: Số lượng mặt hàng bạn đang so sánh, cộng thêm một hàng tiêu đề.

Đối với công thức này, bạn cần 5 cột và 3 hàng để so sánh 2 thành phần (FlexBox và Grid) trên 4 thuộc tính.

2. Triển khai bảng so sánh bằng Lưới

Tạo một thành phần kết hợp TableInGrid sử dụng Grid để bố trí các mục trong bảng. Gọi các hàm column và row bên trong hàm lambda config để xác định kích thước của các đường kẻ và đặt khoảng cách giữa các ô bằng gap(). Vì văn bản có kích thước nội tại, GridTrackSize.Auto sẽ tự động điều chỉnh kích thước cột và hàng cho phù hợp với nội dung của chúng.

Bên trong lambda content, hãy đặt tiêu đề và dữ liệu của bảng. Grid tự động xử lý việc đặt và căn chỉnh tất cả các ô:

@Composable
fun TableInGrid(
    modifier: Modifier = Modifier,
) {
    Grid(
        config = {
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            gap(row = 8.dp, column = 16.dp)
        },
        modifier = modifier,
    ) {
        // Table Header
        Text(text = "", fontWeight = FontWeight.Bold)
        Text(text = "Layout", fontWeight = FontWeight.Bold)
        Text(text = "Lazy loading", fontWeight = FontWeight.Bold)
        Text(text = "Soft wrap", fontWeight = FontWeight.Bold)
        Text(text = "Dynamic layout update", fontWeight = FontWeight.Bold)

        // FlexBox Row
        Text(text = "FlexBox", fontWeight = FontWeight.Bold)
        Text(text = "1D")
        Text(text = "No")
        Text(text = "Yes")
        Text(text = "Yes")

        // Grid Row
        Text(text = "Grid", fontWeight = FontWeight.Bold)
        Text(text = "2D")
        Text(text = "No")
        Text(text = "No")
        Text(text = "Yes")
    }
}
GridByExamples.kt

Kết quả

Giờ đây, bạn đã tạo một bảng so sánh rõ ràng, hai chiều với tính năng tự động căn chỉnh cột và khoảng cách giữa các ô.

Tài nguyên khác

• Lưới trong Compose
• Đặt thuộc tính vùng chứa