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.13.0-alpha03"
   
   [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

Ví dụ 2: FlexBox gói 5 mục thành 2 hàng và tăng kích thước không đồng đều để lấp đầy khoảng trống 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)
    }
) {
    // 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

Để tìm hiểu thêm về hành vi của 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.