Bắt đầu

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

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 2x3 cơ bản, 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)
}

Lưới cơ bản bao gồm các hàng và cột có kích thước cố định.
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 Đặt thuộc tính vùng chứaĐặt thuộc tính mục.