Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

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 dải ô có kích thước tự động, bạn có thể tạo một lưới tự động điều chỉnh theo chiều rộng và chiều cao của ô dựa trên kích thước nội tại 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.

**Bảng 1.** So sánh tính năng của API `FlexBox` và `Grid`
	Bố cục	Tải từng phần	Ngắt dòng mềm	Cập nhật bố cục động
`FlexBox`	1N	Không	Có	Có
`Grid`	2D	Không	Không	Có

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à khả năng bảo trì của bảng. Grid giúp bạn kiểm soát chính xác kích thước và cách 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 composable layout đặt các mục trong lưới hai chiều. Cấu hình bố cục được chỉ định bên 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 bên trong tham số lambda content.
GridTrackSize.Auto: Chỉ định kích thước bản nhạc tự động trong cấu hình lưới dựa trên kích thước nội tại của nội dung, 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 bảng so sánh nhiều cột bằ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à định cỡ bản nhạ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 hàng/cột

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

Cột: Số lượng thuộc tính 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ục bạn đang so sánh, cộng với một hàng tiêu đề.

Đối với công thức so sánh hai thành phần (FlexBox và Grid) trên bốn thuộc tính, bạn cần năm cột và ba hàng.

2. Triển khai bảng so sánh bằng Grid

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 hàm column và row bên trong hàm lambda config để xác định kích thước của dải 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, nên GridTrackSize.Auto sẽ tự động định cỡ các cột và hàng cho phù hợp với nội dung.

Bên trong lambda content, hãy đặt tiêu đề và dữ liệu của bảng. Grid tự động xử lý vị trí và cách căn chỉnh của 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 được một bảng so sánh hai chiều rõ ràng với tính năng tự động căn chỉnh cột và khoảng cách giữa các ô.