Đặt hành vi của vùng chứa

Để định cấu hình hành vi của vùng chứa FlexBox, hãy tạo một FlexBoxConfig khối và cung cấp khối đó bằng tham số config.

FlexBox(
    config = {
        direction(FlexDirection.Column)
        wrap(FlexWrap.Wrap)
        alignItems(FlexAlignItems.Center)
        alignContent(FlexAlignContent.SpaceAround)
        justifyContent(FlexJustifyContent.Center)
        gap(16.dp)
    }
) { // child items
}
FlexBoxSnippets.kt

Sử dụng FlexBoxConfig để xác định hướng bố cục, hành vi gói, căn chỉnh và khoảng cách giữa các mục.

Hướng bố cục

Hàm direction đặt trục chính, xác định hướng bố cục của các mục. Hàm này chấp nhận các giá trị sau:

• Row (mặc định): Đặt trục chính theo chiều ngang. Trong các ngôn ngữ từ trái sang phải, hướng này sẽ là từ trái sang phải, ngược lại trong các ngôn ngữ từ phải sang trái.
• RowReverse: Đảo ngược hướng của Row.
• Column: Đặt trục chính theo chiều dọc, từ trên xuống dưới.
• ColumnReverse: Đảo ngược hướng của Column.

Căn chỉnh các mục và phân bổ khoảng trống

Các phần sau đây mô tả cách căn chỉnh các mục và phân bổ khoảng trống dọc theo trục chính và trục ngang.

Dọc theo trục chính

Sử dụng justifyContent để phân bổ các mục dọc theo trục chính. Bảng sau đây cho thấy hành vi khi hướng là Row.

Start
Center
End
SpaceBetween
SpaceAround
SpaceEvenly

Dọc theo trục ngang

Sử dụng alignItems để căn chỉnh các mục dọc theo trục ngang trong một dòng. Bạn có thể ghi đè hành vi này bằng các mục riêng lẻ bằng cách sử dụng đối tượng sửa đổi alignSelf.

Các hình ảnh sau đây cho thấy hành vi khi hướng là Row:

	Start	End	Center	Stretch	Baseline

Sử dụng alignContent để căn chỉnh các dòng theo trục ngang và phân bổ khoảng trống giữa các dòng. Thuộc tính này chỉ áp dụng khi có nhiều dòng (bật tính năng gói). Các hình ảnh sau đây cho thấy hành vi khi hướng là Row:

	Start	End	Center	Stretch	SpaceBetween	SpaceAround

Gói các mục

Tính năng gói cho phép vùng chứa FlexBox trở thành nhiều dòng, di chuyển các mục không vừa vào một hàng hoặc cột mới dọc theo trục ngang. Định cấu hình hành vi gói bằng cách sử dụng wrap.

Giá trị FlexWrap	Ví dụ sử dụng hướng Row
NoWrap (mặc định): Ngăn các mục gói. Các mục tràn nếu kích thước chính không đủ.
Wrap: Khi không có đủ khoảng trống cho một mục (cộng với bất kỳ khoảng cách nào), một dòng mới sẽ được tạo theo hướng của trục ngang. Ví dụ: nếu hướng là Row, một dòng mới sẽ được thêm bên dưới.
WrapReverse: Tương tự như Wrap, ngoại trừ việc dòng mới được thêm theo hướng ngược lại với trục ngang. Ví dụ: nếu hướng là Row, một dòng mới sẽ được thêm bên trên.

Ví dụ sau đây cho thấy cách hoạt động của thuật toán gói FlexBox. Vùng chứa FlexBox có kích thước chính là 100dp, với wrap được đặt thành FlexWrap.Wrap và khoảng cách là 8dp. Vùng chứa này có 3 mục với basis lần lượt là 20dp, 40dp và 50dp.

Có khoảng trống 100dp trong dòng. Phần tử con 1 là 20dp. Có khoảng trống, vì vậy, Phần tử con 1 được đặt vào dòng.

Có khoảng trống 80dp trong dòng. Khoảng cách là 8dp. Phần tử con 2 là 40dp. Khoảng trống cần thiết là 48dp. Có khoảng trống, vì vậy, khoảng cách và Phần tử con 2 được đặt vào dòng.

Có khoảng trống 32dp trong dòng. Khoảng cách là 8dp. Phần tử con 3 là 50dp. Khoảng trống cần thiết là 58dp. Không có đủ khoảng trống trong dòng hiện tại, vì vậy, Phần tử con 3 được đặt trong một dòng mới.

Thêm khoảng cách giữa các mục

Thêm khoảng cách giữa các hàng và cột bằng cách sử dụng rowGap và columnGap. Điều này hữu ích để tránh thêm đối tượng sửa đổi khoảng cách vào các phần tử con.

rowGap thêm khoảng trống theo chiều dọc giữa các mục và dòng.	columnGap thêm khoảng trống theo chiều ngang giữa các mục và dòng.	gap là một hàm tiện lợi giúp thêm cả columnGap và rowGap.