本頁面由 Cloud Translation API 翻譯而成。

Compose 中的流程版面配置

FlowRow和FlowColumn 是與 Row 和 Column 類似的可組合項，但在這些項目中有所不同也就是容器的空間不足時。這會建立。也可以控制委刊項中的項目數量透過設定 maxItemsInEachRow 或 maxItemsInEachColumn。可以經常使用使用 FlowRow 和 FlowColumn 建立回應式版面配置 (不會剪下內容) 如果項目過大且無法大於某個維度的特徵，則會關閉 maxItemsInEach* 搭配 Modifier.weight(weight)，有助於建構能夠視需要填滿/展開列或欄的寬度。

常見的例子是用於方塊或篩選 UI：

FlowRow 中的 5 個方塊，顯示在空間用盡時，溢流至下一行的情況。 — **圖 1.** 「`FlowRow`」的示例

基本用法

如要使用 FlowRow 或 FlowColumn，請建立這些可組合函式並在其中放置項目且應遵循標準流程：

@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

這個程式碼片段會產生上述 UI 中的項目，項目會自動傳送到下一列的空白時。

流程版面配置的特徵

流程版面配置提供下列功能和資源，方便您執行：在應用程式中建立不同的版面配置

線軸排列方式：水平或垂直排列

主要軸是指項目所在的軸 (例如 FlowRow，項目為水平排列)。horizontalArrangement FlowRow 中的參數可控制各項目之間的可用空間分配方式。

下表列出 FlowRow 在項目上設定 horizontalArrangement 的範例：

已設定`FlowRow`的水平排列方式	結果
`Arrangement.Start` (`Default`)
`Arrangement.SpaceBetween`
`Arrangement.Center`
`Arrangement.End`
`Arrangement.SpaceAround`
`Arrangement.spacedBy(8.dp)`

以 FlowColumn 來說，verticalArrangement 也提供類似選項，但 Arrangement.Top 的預設值。

跨軸排列

交叉軸是與主軸相反方向的軸。例如，在 FlowRow 中，這是垂直軸。如要變更容器內的內容會按跨軸排列 FlowRow 為 verticalArrangement，horizontalArrangement 的 FlowColumn。

對於 FlowRow，下表顯示如何設定優惠內容：verticalArrangement：

已設定`FlowRow`的垂直排列方式	結果
`Arrangement.Top` (`Default`)
`Arrangement.Bottom`
`Arrangement.Center`

如果是 FlowColumn，則可使用 horizontalArrangement 提供的類似選項。預設的交叉軸排列方式為 Arrangement.Start。

個別項目對齊

建議您替列內的個別項目指定對齊。這與「verticalArrangement」不同 horizontalArrangement，因為這會將目前委刊項內的委刊項對齊。您可以使用 Modifier.align() 套用此設定。

舉例來說，如果 FlowRow 中的項目高度不同，則該列會採用最大的項目高度，並將 Modifier.align(alignmentOption) 套用至項目：

已設定`FlowRow`的垂直對齊	結果
`Alignment.Top` (`Default`)
`Alignment.Bottom`
`Alignment.CenterVertically`

FlowColumn 也有類似的選項。預設對齊方式為 Alignment.Start。

資料列或資料欄中的項目數量上限

maxItemsInEachRow 或 maxItemsInEachColumn 參數定義了項目。預設值為 Int.MAX_INT，可盡可能加入更多項目，、這樣廣告就會配合設計

例如，設定 maxItemsInEachRow 會強制只將初始版面配置設為包含 3 個項目：

未設定上限	`maxItemsInEachRow = 3`

延遲載入流程項目

ContextualFlowRow 和 ContextualFlowColumn 是專門用來處理可讓您延遲載入內容的 FlowRow 和 FlowColumn 版本。也提供項目位置的相關資訊例如索引、列號和可用大小列。這對大型資料集和您需要的情境資訊來說相當實用關於某個項目的資訊

maxLines 參數會限制顯示的資料列數，overflow 參數會指定當項目溢位來指定自訂的 expandIndicator 或 collapseIndicator。

舉例來說，如要顯示「+ (剩餘項目數量)」，或「顯示較少」按鈕：

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

內容比對流程資料列範例。 — **圖 2.** 「`ContextualFlowRow`」的示例

商品重量

權重會根據因素和委刊項的可用空間而增加。重要的是，FlowRow 和 Row 之間有一個差異以及權重計算項目寬度的方式對於 Rows，權重會根據 Row 中的所有項目計算。使用 FlowRow 時，重量是以 放入項目的委刊項，而不是 FlowRow 容器。

舉例來說，如果有 4 個項目都落在同一行，且各自有不同的 1f, 2f, 1f 和 3f 權重，則總權重為 7f。剩餘空間資料列或資料欄中的值會除以 7f。接著，每個項目寬度會是計算方式：weight * (remainingSpace / totalWeight)。

您可以將 Modifier.weight 和最大項目與 FlowRow 或 FlowColumn 搭配使用，建立類似格線的版面配置。這種做法可用於建立可調整為裝置大小的回應式版面配置。

這裡有幾個使用權重可達成的目標。一範例是一個格狀空間，其中項目的大小都相同，如下所示：

已建立含流程列的格狀檢視畫面 — **圖 3.** 使用 `FlowRow` 建立格線

如要建立相同項目大小的格線，您可以執行下列操作：

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

請注意，如果您再新增一個項目，並且重複 10 次 (而非 9 次)，最後一個項目會佔據最後一欄的全部為 1f：

最後一個項目完整大小 (格狀檢視) — **圖 4.** 使用 `FlowRow` 建立格線，並讓最後一個項目佔滿整個寬度

您可以將權重與其他 Modifiers 結合，例如 Modifier.width(exactDpAmount), Modifier.aspectRatio(aspectRatio) 或 Modifier.fillMaxWidth(fraction)。這些修飾符會依照允許在 FlowRow (或 FlowColumn) 中調整項目大小。

您也可以建立不同大小的交替格線，其中有兩個項目一個項目會佔據下一個寬度的一半欄：

您可以用下列程式碼達成此目標：

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

比例大小

您可以使用 Modifier.fillMaxWidth(fraction) 指定項目所佔用的容器這與在以下國家/地區套用 Row 或 Column 時，Modifier.fillMaxWidth(fraction) 運作： Row/Column項目會佔剩餘寬度的特定百分比整個容器的寬度

舉例來說，以下程式碼在使用 FlowRow 和 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`：中間項目，整個容器寬度的 0.7 分。
`Row`：中間項目佔剩餘 `Row` 寬度的 0.7%。

`fillMaxColumnWidth()`和`fillMaxRowHeight()`

將 Modifier.fillMaxColumnWidth() 或 Modifier.fillMaxRowHeight() 套用至 FlowColumn 或 FlowRow 中的項目，可確保同一欄或列中的項目與該欄/列中最大的項目具有相同的寬度或高度。

例如，此範例使用 FlowColumn 顯示 Android 清單甜點。您可以看到每個項目在「Modifier.fillMaxColumnWidth()」會套用至這些項目；如果不需要，等紙上物品

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()`」
未設定寬度變更 (納入項目)

為您推薦

呼叫器

自訂版面配置