Đặ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 một FlexBox.

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

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 khoảng trống. Bạn có thể coi đây là kích thước ưu tiên của mặt hàng.

Loại giá trị	Hành vi	Đoạn mã Lưu ý: Các hộp này có kích thước nội tại tối đa là `100dp`	Ví dụ 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 có tính nă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
Tỷ lệ 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 vốn có của mục, thì kích thước tối thiểu vốn có sẽ được dùng thay thế. 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 dùng.

Tăng kích thước 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à khoảng trống còn lại trong vùng chứa FlexBox sau khi cộng tất cả các giá trị basis của các mục. Giá trị grow cho biết lượng 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 ngang hàng của thành phần đó. Theo mặc định, các mục sẽ không tăng kích thước.

Ví dụ sau đây minh hoạ một FlexBox có 3 mục con. Mỗi giá trị đều 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ả khoảng trống bổ sung.

Các hình ảnh cho thấy hành vi của FlexBox khi kích thước vùng chứa của thành phần này 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 lưu trữ bổ sung.

3 mục, mỗi mục có cơ sở 100 dp, trong một vùng chứa 600 dp, trước khi tăng.

Child 1 tăng thêm 300dp để lấp đầy khoảng trống.

Mục đầu tiên tăng kích thước để lấp đầy 300 dp 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 phần tử con có một giá trị grow riêng.

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 lưu trữ bổ sung.

Ba mục có cơ sở 100dp mỗi mục, trong một vùng chứa 600dp, trước khi tăng, với các giá trị tăng khác nhau.

Tổng giá trị tăng trưởng là 6.

Trẻ 1 tăng thêm (1 / 6) * 300 = 50dp

Trẻ 2 tăng thêm (2 / 6) * 300 = 100dp

Trẻ 3 lớn thêm (3 / 6) * 300 = 150dp

Các mục sẽ tăng kích thước để lấp đầy 300 dp không gian bổ sung dựa trên các giá trị tăng trưởng tương đối.

Thu nhỏ các mục khi không có đủ 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 khoảng trống bổ sung cho các mục, khoảng trống thiếu hụt sẽ được phân phối cho các mục. Giá trị shrink chỉ định lượng không gian mà mục nhận được, hay đúng hơn là lượng không gian mà mục sẽ giảm. Theo mặc định, các mục có giá trị shrink là 1f, tức là chúng sẽ thu nhỏ bằng nhau.

Ví dụ sau đây cho thấy 2 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 hẹp là 1f, tức là phần tử này sẽ thu hẹp để hấp thụ tất cả khoảng trống 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 giảm, Phần tử con 1 cũng giảm.

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 một mục được căn chỉnh theo trục chéo. Thao tác này sẽ ghi đè thuộc tính alignItems của vùng chứa cho mục này. Thành phần 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

5 phần tử con có kích thước khác nhau ghi đè thuộc tính alignItems.

Thứ tự mặt hàng

Theo mặc định, FlexBox sẽ bố trí các mục theo thứ tự mà chúng được khai báo trong mã. Ghi đè hành vi này bằng cách sử dụ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 một 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ủa các mục đó.

Ví dụ sau đây minh hoạ 2 mục con. Tham số đầu tiên có giá trị mặc định là order bằng 0, còn tham số thứ hai có thứ tự là -1. Sau khi sắp xếp, Phần tử con 1 sẽ xuất hiện sau Phần tử 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

Hai hộp bo tròn, trong đó hộp đầu tiên chứa văn bản Hello và hộp thứ hai chứa văn bản World.

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

Tiếp

Tìm hiểu về thiết bị có thể gập lại

Đặt hành vi của mục Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.