Làm quen với FlexBox

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

Thiết lập dự án

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

    [versions]
compose = "1.13.0-beta01"

[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 tệp build.gradle.kts của ứng dụng.

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

Tạo bố cục FlexBox cơ bản

Ví dụ 1: FlexBox bố trí hai phần tử Text được căn giữa.

FlexBox(
    config = {
        direction(FlexDirection.Column)
        alignItems(FlexAlignItems.Center)
    }
) {
    Text(text = "Hello", fontSize = 48.sp)
    Text(text = "World!", fontSize = 48.sp)
}

Các thành phần kết hợp văn bản Hello World xếp chồng lên nhau trong một cách triển khai FlexBox cơ bản.

Ví dụ 2: FlexBox gói 5 mục thành 2 hàng và tăng các mục này không đồng đều để lấp đầy không gian có sẵn trên mỗi hàng. Có một khoảng trống 8.dp, cả theo chiều dọc và chiều ngang, giữa các mục.

FlexBox(
    config = {
        wrap(FlexWrap.Wrap)
        gap(8.dp)
    }
) {
    // All boxes have an intrinsic width of 100.dp
    // Some grow to fill any remaining space on the row.
    RedRoundedBox()
    BlueRoundedBox()
    GreenRoundedBox(modifier = Modifier.flex { grow(1.0f) })
    OrangeRoundedBox(modifier = Modifier.flex { grow(1.0f) })
    PinkRoundedBox(modifier = Modifier.flex { grow(1.0f) })
}

Hai hàng mục có màu, trong đó có 3 mục có kích thước không bằng nhau được phân bổ trên hàng trên cùng và 2 mục có kích thước không bằng nhau trên hàng dưới cùng.

Để tìm hiểu thêm về hành vi của FlexBox, hãy xem phần Đặt hành vi của vùng chứa và Đặt hành vi của mục.