Đặ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 bao bọc, căn chỉnh và khoảng trống giữa các mục.

Hướng bố cục

Thuộc tính direction xác định trục chính, quy định hướng bố trí các mục.

• Row (mặc định): Đặt trục chính thành trục ngang. Trong các ngôn ngữ viết từ trái sang phải, hướng này sẽ là từ trái sang phải, còn trong các ngôn ngữ viết từ phải sang trái thì ngược lạ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 phối 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 phối khoảng trống 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 công cụ sửa đổi alignSelf để ghi đè hành vi này cho từng mục.

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 chéo và phân phối thêm 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 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

Gói các mục

Tính năng xuống dòng cho phép vùng chứa FlexBox trở thành nhiều dòng, di chuyển những 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 xuống dòng 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 xuống dòng. Các mục sẽ 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, 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 chéo. Ví dụ: nếu hướng là Row, một dòng mới sẽ được thêm lên trên.

Ví dụ sau đây minh hoạ cách hoạt động của thuật toán bao bọc 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 trống là 8dp. Nội dung này chứa 3 mục có basis 20dp, 40dp và 50dp tương ứng.

Còn 100dp chỗ trống trong hàng. Trẻ 1 là 20dp. Có khoảng trống, nên Trẻ 1 được đặt vào dòng.

Còn 80dp chỗ trống trong hàng. Khoảng cách là 8dp. Child 2 là 40dp. Không gian 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òn 32dp chỗ trống trong hàng. Khoảng cách là 8dp. Trẻ 3 là 50dp. Không gian cần thiết là 58dp. Không đủ dung lượng trong dòng hiện tại, nên Con 3 được đặt ở 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 cách sử dụng rowGap và columnGap. Điều này rất hữu ích để tránh thêm đối tượng sửa đổi khoảng cách vào các thành phần 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, thêm cả columnGap và rowGap.