Đặ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 khối FlexBoxConfig 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 trống giữa các mục.

Hướng bố cục

Hàm direction đặt trục chính, trục này chỉ định hướng bố trí các mục. Trường 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 ngôn ngữ từ trái sang phải, thao tác này sẽ là từ trái sang phải, và ngược lại trong 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ổ không gian thừa

Các phần sau đây mô tả cách căn chỉnh các mục và phân phối không gian thừa dọc theo trục chính và trục chéo.

Dọc theo trục chính

Sử dụng justifyContent để phân phối 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 chéo

Sử dụng alignItems để căn chỉnh các mục dọc theo trục chéo trong một dòng. Bạn có thể dùng đối tượng sửa đổi alignSelf để ghi đè hành vi này cho từng mụ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 chéo và phân bổ thêm không gian 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 xuống dòng). Các hình ảnh sau đây cho thấy hành vi khi hướng là Row:

	Start	End	Center	Stretch	SpaceBetween	SpaceAround

Xuống dòng 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 chéo. Định cấu hình hành vi gói bằng wrap.

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

Ví dụ sau đây minh hoạ 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, trong đó wrap được đặt thành FlexWrap.Wrap và khoảng trống là 8dp. Thành phần này chứa 3 mục có basis lần lượt là 20dp, 40dp và 50dp.

Có 100dp không gian trống trong dòng. Trẻ 1 là 20dp. Vì còn chỗ nên Thành phần con 1 được đặt vào dòng.

Có 80dp không gian trống trong dòng. Khoảng cách là 8dp. Trẻ 2 là 40dp. Dung lượng cần thiết là 48dp. Vì có không gian nên khoảng trống và Thành phần con 2 được đặt vào dòng.

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

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

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

rowGap thêm khoảng cách dọc giữa các mục và dòng.	columnGap thêm khoảng cách ngang giữa các mục và dòng.	gap là một hàm tiện lợi, thêm cả columnGap và rowGap.