Đặt hành vi của mục

Sử dụng Modifier.flex để kiểm soát cách một mục thay đổi kích thước, thứ tự và được căn chỉnh bên trong FlexBox.

Kích thước mặt hàng

Sử dụng các hàm basis, grow và shrink để kiểm soát kích thước của một mục.

FlexBox {
    RedRoundedBox(
        modifier = Modifier.flex {
            basis(FlexBasis.Auto)
            grow(1.0f)
            shrink(0.5f)
        }
    )
}
FlexBoxSnippets.kt

Đặt kích thước ban đầu

Sử dụng basis để chỉ định kích thước ban đầu của mục trước khi phân phối thêm không gian. Bạn có thể coi đây là kích thước ưu tiên của mục.

Loại giá trị	Hành vi	Đoạn mã Lưu ý: Các hộp có kích thước nội tại tối đa là 100dp	Ví dụ về cách sử dụng chiều rộng vùng chứa 600dp
Auto (mặc định)	Sử dụng kích thước nội tại tối đa của mục. Ví dụ: chiều rộng nội tại tối đa của một thành phần kết hợp Text là chiều rộng của tất cả văn bản trên một dòng (không xuống dòng).	FlexBox { RedRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) BlueRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) } FlexBoxSnippets.kt
Khắc phục dp	Kích thước cố định tính bằng Dp.	FlexBox { RedRoundedBox( Modifier.flex { basis(200.dp) } ) BlueRoundedBox( Modifier.flex { basis(100.dp) } ) } FlexBoxSnippets.kt
Phần trăm	Tỷ lệ phần trăm kích thước vùng chứa.	FlexBox { RedRoundedBox( Modifier.flex { basis(0.7f) } ) BlueRoundedBox( Modifier.flex { basis(0.3f) } ) } FlexBoxSnippets.kt

Nếu giá trị cơ sở nhỏ hơn kích thước tối thiểu nội tại của mục, thì kích thước tối thiểu nội tại sẽ được sử dụng. Ví dụ: nếu một mục Text chứa một từ yêu cầu 50dp để hiển thị, nhưng cũng có basis = 10.dp, thì giá trị 50dp sẽ được sử dụng.

Mở rộng các mục khi có không gian

Sử dụng grow để chỉ định mức độ tăng của một mục khi có thêm không gian. Đây là không gian còn lại trong vùng chứa FlexBox sau khi cộng tất cả giá trị basis của các mục. Giá trị grow cho biết mức độ không gian bổ sung mà một thành phần con nhất định sẽ nhận được so với các thành phần đồng cấp. Theo mặc định, các mục sẽ không tăng lên.

Ví dụ sau đây cho thấy một FlexBox có 3 mục con. Mỗi loại có giá trị cơ sở là 100dp. Phần tử con đầu tiên có giá trị grow dương. Vì chỉ có một thành phần con có giá trị grow, nên giá trị thực tế không liên quan – miễn là giá trị đó dương, thành phần con sẽ nhận được tất cả không gian thừa.

Hình ảnh cho thấy hành vi của FlexBox khi kích thước vùng chứa là 600dp.

FlexBox { RedRoundedBox( title = "400dp", modifier = Modifier.flex { grow(1f) } ) BlueRoundedBox(title = "100dp") GreenRoundedBox(title = "100dp") } FlexBoxSnippets.kt

Mỗi thành phần con có giá trị cơ sở là 100dp. Có 300dp dung lượng bổ sung. Thành phần con 1 tăng thêm 300dp để lấp đầy không gian thừa.

Trong ví dụ sau, kích thước vùng chứa và kích thước basis là như nhau. Điểm khác biệt là mỗi thành phần con có một giá trị grow khác nhau.

FlexBox { RedRoundedBox( title = "150dp", modifier = Modifier.flex { grow(1f) } ) BlueRoundedBox( title = "200dp", modifier = Modifier.flex { grow(2f) } ) GreenRoundedBox( title = "250dp", modifier = Modifier.flex { grow(3f) } ) } FlexBoxSnippets.kt

Mỗi thành phần con có giá trị cơ sở là 100dp. Có 300dp dung lượng bổ sung. Tổng giá trị tăng trưởng là 6. Thành phần con 1 tăng thêm (1 / 6) * 300 = 50dp Thành phần con 2 tăng thêm (2 / 6) * 300 = 100dp Thành phần con 3 tăng thêm (3 / 6) * 300 = 150dp

Thu nhỏ các mục khi không đủ không gian

Sử dụng shrink để chỉ định mức độ thu nhỏ của một mục khi vùng chứa FlexBox không có đủ không gian cho tất cả các mục. shrink hoạt động giống như grow, ngoại trừ việc thay vì phân phối không gian thừa cho các mục, không gian thiếu sẽ được phân phối cho các mục. Giá trị shrink chỉ định mức độ thiếu hụt không gian mà mục nhận được, hay nói cách khác là mức độ thu nhỏ của mục. Theo mặc định, các mục có giá trị shrink là 1f, nghĩa là chúng thu nhỏ như nhau.

Ví dụ sau đây cho thấy hai thành phần kết hợp Text có cùng văn bản. Phần tử con đầu tiên có giá trị thu nhỏ là 1f, nghĩa là phần tử này sẽ thu nhỏ để hấp thụ tất cả không gian bị thiếu hụt.

FlexBox {
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelRed)
            .flex { shrink(1f) }
    )
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelBlue)
            .flex { shrink(0f) }
    )
}
FlexBoxSnippets.kt

Khi kích thước vùng chứa thu nhỏ, Phần tử con 1 sẽ thu nhỏ.

Kích thước vùng chứa	Giao diện người dùng FlexBox
700dp
500dp
450dp

Căn chỉnh mục

Sử dụng alignSelf để kiểm soát cách căn chỉnh một mục theo trục chéo. Thuộc tính này ghi đè thuộc tính alignItems của vùng chứa cho mục này. Thuộc tính này có tất cả các giá trị có thể có, cùng với Auto kế thừa hành vi của vùng chứa FlexBox.

Ví dụ: FlexBox này có alignItems được đặt thành Start và 5 thành phần con ghi đè chế độ căn chỉnh trục chéo.

FlexBox(
    config = {
        alignItems(FlexAlignItems.Start)
    }
) {
    RedRoundedBox()
    BlueRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Center) })
    GreenRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.End) })
    PinkRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Stretch) })
    OrangeRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Baseline) })
}
FlexBoxSnippets.kt

Thứ tự mục

Theo mặc định, FlexBox bố trí các mục theo thứ tự được khai báo trong mã. Ghi đè hành vi này bằng order.

Giá trị mặc định cho order là 0 và FlexBox sắp xếp các mục dựa trên giá trị này theo thứ tự tăng dần. Mọi mục có cùng giá trị order đều được bố trí theo cùng thứ tự mà chúng được khai báo. Sử dụng các giá trị order âm và dương để di chuyển các mục đến đầu hoặc cuối bố cục mà không thay đổi vị trí khai báo các mục đó.

Ví dụ sau đây cho thấy hai mục con. Thẻ đầu tiên có order mặc định là 0 và thẻ thứ hai có thứ tự là -1. Sau khi sắp xếp, Con 1 sẽ xuất hiện sau Con 2.

FlexBox {
    // Declared first, but will be placed after visually
    RedRoundedBox(
        title = "World"
    )

    // Declared second, but will be placed first visually
    BlueRoundedBox(
        title = "Hello",
        modifier = Modifier.flex {
            order(-1)
        }
    )
}
FlexBoxSnippets.kt