Đặ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ục

Sử dụng các thuộc tính 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 bổ 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ụ 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 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
Cố định `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 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ị của 50dp sẽ được sử dụng.

Tăng kích thước mục khi có không gian

Sử dụng grow để chỉ định mức tăng kích thước 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ả các giá trị basis của mục đã được cộng lại. 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 cùng cấp. Theo mặc định, các mục sẽ không tăng kích thước.

Ví dụ sau đây cho thấy một FlexBox có 3 mục con. Mỗi mục có giá trị cơ sở là 100dp. Thành phần 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ị đó là dương, thành phần con sẽ nhận được tất cả không gian bổ sung.

Hình ảnh cho thấy hành vi 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 không gian 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.

Thành phần con 1 tăng thêm 300dp để lấp đầy không gian bổ sung.

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à basis kích thước là giống 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 không gian bổ sung.

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

Tổng giá trị grow 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

Các mục sẽ tăng lên để 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 hẹp các mục khi không có đủ không gian

Sử dụng shrink để chỉ định mức thu hẹp 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 bổ không gian bổ sung cho các mục, thì thiếu hụt không gian sẽ được phân bổ 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 hẹp của mục. Theo mặc định, các mục có giá trị shrink là 1f, nghĩa là chúng thu hẹp 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. Thành phần con đầu tiên có giá trị shrink là 1f, nghĩa là thành phần này thu hẹp để hấp thụ tất cả sự thiếu hụt không gian.

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 hẹp, Thành phần con 1 sẽ thu hẹp.

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 ngang. Thuộc tính này sẽ 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ể giống nhau, cùng với Auto kế thừa hành vi của vùng chứa FlexBox.

Ví dụ: FlexBox này đặt alignItems thành Start và 5 thành phần con ghi đè việc căn chỉnh trục ngang.

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

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

Thứ tự mục

Theo mặc định, FlexBox bố trí các mục theo thứ tự 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 đúng thứ tự khai báo. Sử dụng giá trị âm và dương order để 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.

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