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 lib.versions.toml của dự án.

    [versions]
compose = "1.11.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 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í 2 phần tử Text được căn chỉnh ở giữa.

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

Các thành phần kết hợp văn bản Xin chào 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 vào 2 hàng và tăng kích thước của các mục không bằng nhau để lấp đầy không gian có sẵn trên mỗi hàng. Có một khoảng trống 8.dp theo cả chiều dọc và chiều ngang giữa các mục.

FlexBox(
    config = {
        wrap(FlexWrap.Wrap)
        gap(8.dp)
    }
) {
    RedRoundedBox()
    BlueRoundedBox()
    GreenRoundedBox(modifier = Modifier.width(350.dp).flex { grow(1.0f) })
    OrangeRoundedBox(modifier = Modifier.width(200.dp).flex { grow(0.7f) })
    PinkRoundedBox(modifier = Modifier.width(200.dp).flex { grow(0.3f) })
}
FlexBoxSnippets.kt

Hai hàng gồm các mục có màu, với 3 mục có kích thước không bằng nhau được phân phối 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 FlexBox, hãy xem bài viết Đặt hành vi của vùng chứa và Đặt hành vi của mục.

Trước
Tổng quan
Tiếp
Đặt hành vi của vùng chứa