Bắt đầu

Trang này mô tả cách triển khai bố cục cơ bản Grid.

Thiết lập dự án

1. Thêm thư viện androidx.compose.foundation.layout vào lib.versions.toml của dự án.

   [versions]
   compose = "1.11.0-beta02"
   
   [libraries]
   androidx-compose-foundation-layout = { group = "androidx.compose.foundation", name = "foundation-layout", version.ref = "compose" }
   

2. Thêm phần phụ thuộc thư viện vào build.gradle.kts của ứng dụng.

   dependencies {
       implementation(libs.androidx.compose.foundation.layout)
   }
   

Tạo lưới cơ bản

Ví dụ sau đây tạo một lưới cơ bản 2x3, trong đó các cột và hàng có kích thước cố định là 100.dp.

Grid(
    config = {
        repeat(2) {
            column(100.dp)
        }
        repeat(3) {
            row(100.dp)
        }
    }
) {
    Card1(containerColor = PastelRed)
    Card2(containerColor = PastelGreen)
    Card3(containerColor = PastelBlue)
    Card4(containerColor = PastelPink)
    Card5(containerColor = PastelOrange)
    Card6(containerColor = PastelYellow)
}
DefineGrid.kt

Hình 1. Lưới cơ bản bao gồm các hàng và cột có kích thước cố định.

Để tìm hiểu cách triển khai các lưới nâng cao hơn, hãy xem phần Đặt thuộc tính vùng chứa và Đặt thuộc tính mục.