Bố cục luồng trong Compose

FlowRow và FlowColumn là các thành phần kết hợp tương tự như Row và Column, nhưng khác ở chỗ các mục sẽ chuyển sang dòng tiếp theo khi vùng chứa hết không gian. Thao tác này sẽ tạo nhiều hàng hoặc cột. Bạn cũng có thể kiểm soát số lượng mục trong một dòng bằng cách đặt maxItemsInEachRow hoặc maxItemsInEachColumn. Bạn thường có thể sử dụng FlowRow và FlowColumn để tạo bố cục thích ứng – nội dung sẽ không bị cắt nếu các mục quá lớn cho một kích thước và việc sử dụng kết hợp maxItemsInEach* với Modifier.weight(weight) có thể giúp tạo bố cục lấp đầy/mở rộng chiều rộng của hàng hoặc cột khi cần.

Ví dụ điển hình là cho một khối hoặc giao diện người dùng lọc:

5 khối trong FlowRow, hiển thị phần tràn sang dòng tiếp theo khi không còn không gian.
Hình 1. Ví dụ về FlowRow

Cách sử dụng cơ bản

Để sử dụng FlowRow hoặc FlowColumn, hãy tạo các thành phần kết hợp này và đặt các mục bên trong theo luồng chuẩn:

@Composable
private fun FlowRowSimpleUsageExample() {
    FlowRow(modifier = Modifier.padding(8.dp)) {
        ChipItem("Price: High to Low")
        ChipItem("Avg rating: 4+")
        ChipItem("Free breakfast")
        ChipItem("Free cancellation")
        ChipItem("£50 pn")
    }
}
FlowLayoutSnippets.kt

Đoạn mã này sẽ tạo ra giao diện người dùng như trên, trong đó các mục sẽ tự động chuyển sang hàng tiếp theo khi không còn không gian trong hàng đầu tiên.

Các tính năng của bố cục luồng

Bố cục Flow có các tính năng và thuộc tính sau đây mà bạn có thể sử dụng để tạo nhiều bố cục trong ứng dụng.

Sắp xếp trục chính: sắp xếp theo chiều ngang hoặc chiều dọc

Trục chính là trục mà các mục được bố trí (ví dụ: trong FlowRow, các mục được sắp xếp theo chiều ngang). Tham số horizontalArrangement trong FlowRow kiểm soát cách phân bổ không gian trống giữa các mục.

Bảng sau đây cho thấy các ví dụ về cách đặt horizontalArrangement trên các mục cho FlowRow:

Sắp xếp theo chiều ngang được đặt trên FlowRow

Kết quả

Arrangement.Start (Default)

 Các mục được sắp xếp theo thời gian bắt đầu

Arrangement.SpaceBetween

 Sắp xếp các mục với khoảng trống ở giữa

Arrangement.Center

 Các mục được sắp xếp ở giữa

Arrangement.End

 Các mục được sắp xếp ở cuối

Arrangement.SpaceAround

 Các mục được sắp xếp với khoảng trống xung quanh

Arrangement.spacedBy(8.dp)

 Các mục được giãn cách bằng một dp nhất định

Đối với FlowColumn, bạn có thể sử dụng các tuỳ chọn tương tự với verticalArrangement, với tuỳ chọn mặc định là Arrangement.Top.

Sắp xếp theo trục chéo

Trục chéo là trục theo hướng đối diện với trục chính. Ví dụ: trong FlowRow, đây là trục tung. Để thay đổi cách sắp xếp nội dung tổng thể bên trong vùng chứa theo trục chéo, hãy sử dụng verticalArrangement cho FlowRow và horizontalArrangement cho FlowColumn.

Đối với FlowRow, bảng sau đây cho thấy các ví dụ về cách đặt nhiều verticalArrangement trên các mục:

Chế độ sắp xếp theo chiều dọc được đặt trên FlowRow

Kết quả

Arrangement.Top (Default)

 Sắp xếp phần trên cùng của vùng chứa

Arrangement.Bottom

 Sắp xếp phần dưới cùng của vùng chứa

Arrangement.Center

 Sắp xếp trung tâm vùng chứa

Đối với FlowColumn, bạn có thể sử dụng các tuỳ chọn tương tự với horizontalArrangement. Bố cục trục chéo mặc định là Arrangement.Start.

Căn chỉnh từng mục

Bạn có thể muốn định vị từng mục trong hàng theo nhiều cách căn chỉnh. Thuộc tính này khác với verticalArrangement và horizontalArrangement vì thuộc tính này căn chỉnh các mục trong dòng hiện tại. Bạn có thể áp dụng điều này bằng Modifier.align().

Ví dụ: khi các mục trong FlowRow có chiều cao khác nhau, hàng sẽ lấy chiều cao của mục lớn nhất và áp dụng Modifier.align(alignmentOption) cho các mục:

Căn chỉnh dọc được đặt trên FlowRow

Kết quả

Alignment.Top (Default)

 Các mục được căn chỉnh lên trên cùng

Alignment.Bottom

 Các mục được căn chỉnh xuống dưới cùng

Alignment.CenterVertically

 Các mục được căn chỉnh vào chính giữa

Đối với FlowColumn, bạn cũng có thể sử dụng các tuỳ chọn tương tự. Căn chỉnh mặc định là Alignment.Start.

Số mục tối đa trong hàng hoặc cột

Các tham số maxItemsInEachRow hoặc maxItemsInEachColumn xác định số mục tối đa trong trục chính được phép trong một dòng trước khi chuyển sang dòng tiếp theo. Giá trị mặc định là Int.MAX_INT, cho phép nhiều mục nhất có thể, miễn là kích thước của các mục đó cho phép chúng vừa với dòng.

Ví dụ: việc đặt maxItemsInEachRow buộc bố cục ban đầu chỉ có 3 mục:

Chưa đặt giới hạn tối đa

maxItemsInEachRow = 3
Không đặt giá trị tối đa trên hàng flow Số mục tối đa được đặt trên hàng flow

Tải từng phần các mục trong luồng

ContextualFlowRow và ContextualFlowColumn là phiên bản chuyên biệt của FlowRow và FlowColumn, cho phép bạn tải lười nội dung của hàng hoặc cột flow. Các thuộc tính này cũng cung cấp thông tin về vị trí của mục (chỉ mục, số hàng và kích thước có sẵn), chẳng hạn như liệu mục có nằm trong hàng đầu tiên hay không. Điều này rất hữu ích cho các tập dữ liệu lớn và nếu bạn cần thông tin theo ngữ cảnh về một mục.

Tham số maxLines giới hạn số hàng hiển thị và tham số overflow chỉ định nội dung sẽ hiển thị khi đạt đến số lượng mục tràn, cho phép bạn chỉ định expandIndicator hoặc collapseIndicator tuỳ chỉnh.

Ví dụ: để hiển thị nút "+ (số mục còn lại)" hoặc "Hiển thị ít hơn":

val totalCount = 40
var maxLines by remember {
    mutableStateOf(2)
}

val moreOrCollapseIndicator = @Composable { scope: ContextualFlowRowOverflowScope ->
    val remainingItems = totalCount - scope.shownItemCount
    ChipItem(if (remainingItems == 0) "Less" else "+$remainingItems", onClick = {
        if (remainingItems == 0) {
            maxLines = 2
        } else {
            maxLines += 5
        }
    })
}
ContextualFlowRow(
    modifier = Modifier
        .safeDrawingPadding()
        .fillMaxWidth(1f)
        .padding(16.dp)
        .wrapContentHeight(align = Alignment.Top)
        .verticalScroll(rememberScrollState()),
    verticalArrangement = Arrangement.spacedBy(4.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    maxLines = maxLines,
    overflow = ContextualFlowRowOverflow.expandOrCollapseIndicator(
        minRowsToShowCollapse = 4,
        expandIndicator = moreOrCollapseIndicator,
        collapseIndicator = moreOrCollapseIndicator
    ),
    itemCount = totalCount
) { index ->
    ChipItem("Item $index")
}
FlowLayoutSnippets.kt

Ví dụ về hàng quy trình theo ngữ cảnh.
Hình 2. Ví dụ về ContextualFlowRow

Trọng số mặt hàng

Trọng số làm tăng kích thước của một mục dựa trên hệ số và không gian có sẵn trên dòng mà mục đó được đặt. Điều quan trọng là có sự khác biệt giữa FlowRow và Row về cách sử dụng trọng số để tính chiều rộng của một mục. Đối với Rows, trọng số dựa trên tất cả các mục trong Row. Với FlowRow, trọng số được tính dựa trên các mục trong dòng mà một mục được đặt vào, chứ không phải tất cả các mục trong vùng chứa FlowRow.

Ví dụ: nếu bạn có 4 mục đều nằm trên một dòng, mỗi mục có trọng số khác nhau là 1f, 2f, 1f và 3f, thì tổng trọng số là 7f. Không gian còn lại trong một hàng hoặc cột sẽ được chia cho 7f. Sau đó, chiều rộng của mỗi mục sẽ được tính bằng: weight * (remainingSpace / totalWeight).

Bạn có thể sử dụng kết hợp Modifier.weight và các mục tối đa với FlowRow hoặc FlowColumn để tạo bố cục giống như lưới. Phương pháp này hữu ích cho việc tạo bố cục thích ứng điều chỉnh theo kích thước của thiết bị.

Sau đây là một số ví dụ về những gì bạn có thể đạt được khi sử dụng trọng số. Ví dụ: một lưới có các mục có kích thước bằng nhau, như minh hoạ dưới đây:

Lưới được tạo bằng hàng flow
Hình 3. Sử dụng FlowRow để tạo lưới

Để tạo lưới có kích thước mục bằng nhau, bạn có thể làm như sau:

val rows = 3
val columns = 3
FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = rows
) {
    val itemModifier = Modifier
        .padding(4.dp)
        .height(80.dp)
        .weight(1f)
        .clip(RoundedCornerShape(8.dp))
        .background(MaterialColors.Blue200)
    repeat(rows * columns) {
        Spacer(modifier = itemModifier)
    }
}
FlowLayoutSnippets.kt

Quan trọng là nếu bạn thêm một mục khác và lặp lại 10 lần thay vì 9 lần, thì mục cuối cùng sẽ chiếm toàn bộ cột cuối cùng, vì tổng trọng số cho toàn bộ hàng là 1f:

Mục cuối cùng ở kích thước đầy đủ trên lưới
Hình 4. Sử dụng FlowRow để tạo lưới có mục cuối cùng chiếm toàn bộ chiều rộng

Bạn có thể kết hợp trọng số với các Modifiers khác như Modifier.width(exactDpAmount), Modifier.aspectRatio(aspectRatio) hoặc Modifier.fillMaxWidth(fraction). Tất cả các đối tượng sửa đổi này đều hoạt động cùng nhau để cho phép định cỡ thích ứng các mục trong FlowRow (hoặc FlowColumn).

Bạn cũng có thể tạo lưới luân phiên gồm các kích thước mục khác nhau, trong đó hai mục chiếm một nửa chiều rộng và một mục chiếm toàn bộ chiều rộng của cột tiếp theo:

Lưới luân phiên với hàng flow
Hình 5. FlowRow với kích thước hàng luân phiên

Bạn có thể thực hiện việc này bằng mã sau:

FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = 2
) {
    val itemModifier = Modifier
        .padding(4.dp)
        .height(80.dp)
        .clip(RoundedCornerShape(8.dp))
        .background(Color.Blue)
    repeat(6) { item ->
        // if the item is the third item, don't use weight modifier, but rather fillMaxWidth
        if ((item + 1) % 3 == 0) {
            Spacer(modifier = itemModifier.fillMaxWidth())
        } else {
            Spacer(modifier = itemModifier.weight(0.5f))
        }
    }
}
FlowLayoutSnippets.kt

Định cỡ theo phân số

Khi sử dụng Modifier.fillMaxWidth(fraction), bạn có thể chỉ định kích thước của vùng chứa mà một mục sẽ chiếm. Điều này khác với cách hoạt động của Modifier.fillMaxWidth(fraction) khi áp dụng cho Row hoặc Column, trong đó các mục Row/Column chiếm tỷ lệ phần trăm chiều rộng còn lại, thay vì chiều rộng của toàn bộ vùng chứa.

Ví dụ: mã sau đây sẽ tạo ra kết quả khác nhau khi sử dụng FlowRow so với Row:

FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = 3
) {
    val itemModifier = Modifier
        .clip(RoundedCornerShape(8.dp))
    Box(
        modifier = itemModifier
            .height(200.dp)
            .width(60.dp)
            .background(Color.Red)
    )
    Box(
        modifier = itemModifier
            .height(200.dp)
            .fillMaxWidth(0.7f)
            .background(Color.Blue)
    )
    Box(
        modifier = itemModifier
            .height(200.dp)
            .weight(1f)
            .background(Color.Magenta)
    )
}
FlowLayoutSnippets.kt

FlowRow: Mục ở giữa có tỷ lệ 0,7 chiều rộng của toàn bộ vùng chứa.

 Chiều rộng phân đoạn với hàng flow

Row: Mục ở giữa chiếm 0,7% chiều rộng Row còn lại.

 Chiều rộng phân đoạn với hàng

fillMaxColumnWidth() và fillMaxRowHeight()

Việc áp dụng Modifier.fillMaxColumnWidth() hoặc Modifier.fillMaxRowHeight() cho một mục bên trong FlowColumn hoặc FlowRow sẽ đảm bảo rằng các mục trong cùng một cột hoặc hàng có cùng chiều rộng hoặc chiều cao với mục lớn nhất trong cột/hàng.

Ví dụ: ví dụ này sử dụng FlowColumn để hiển thị danh sách các món tráng miệng Android. Bạn có thể thấy sự khác biệt về chiều rộng của từng mục khi áp dụng Modifier.fillMaxColumnWidth() cho các mục so với khi không áp dụng và các mục được gói.

FlowColumn(
    Modifier
        .padding(20.dp)
        .fillMaxHeight()
        .fillMaxWidth(),
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp),
    maxItemsInEachColumn = 5,
) {
    repeat(listDesserts.size) {
        Box(
            Modifier
                .fillMaxColumnWidth()
                .border(1.dp, Color.DarkGray, RoundedCornerShape(8.dp))
                .padding(8.dp)
        ) {

            Text(
                text = listDesserts[it],
                fontSize = 18.sp,
                modifier = Modifier.padding(3.dp)
            )
        }
    }
}
FlowLayoutSnippets.kt

Modifier.fillMaxColumnWidth() được áp dụng cho từng mục

 fillMaxColumnWidth

Không đặt thay đổi về chiều rộng (các mục gói)

 Chưa đặt chiều rộng cột tối đa
Trước
Số máy nhắn tin
Tiếp
Bố cục tuỳ chỉnh