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-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 bố cục FlexBox cơ bản

Ví dụ 1: FlexBox sắp xếp 2 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)
}
FlexBoxSnippets.kt

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 vào 2 hàng và mở rộ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 cách 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)
    }
) {
    // 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) })
}
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