FlowRow和FlowColumn
是與 Row 和 Column 類似的可組合項，但在這些項目中有所不同
也就是容器的空間不足時。這會建立
。也可以控制委刊項中的項目數量
透過設定 maxItemsInEachRow 或 maxItemsInEachColumn。可以經常使用
使用 FlowRow 和 FlowColumn 建立回應式版面配置 (不會剪下內容)
如果項目過大且無法大於某個維度的特徵，則會關閉
maxItemsInEach* 搭配 Modifier.weight(weight)，有助於建構能夠
視需要填滿/展開列或欄的寬度。
常見的例子是用於方塊或篩選 UI：
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")
}
}
這個程式碼片段會產生上述 UI 中的項目，項目會自動傳送到 下一列的空白時。
流程版面配置的特徵
流程版面配置提供下列功能和資源，方便您執行： 在應用程式中建立不同的版面配置
線軸排列方式：水平或垂直排列
主要軸是指項目所在的軸 (例如
FlowRow，項目為水平排列)。horizontalArrangement
FlowRow 中的參數可控制各項目之間的可用空間分配方式。
下表列出 FlowRow 在項目上設定 horizontalArrangement 的範例：
已設定 |
結果 |
|
|
|
|
|
|
|
|
|
|
|
以 FlowColumn 來說，verticalArrangement 也提供類似選項，但
Arrangement.Top 的預設值。
跨軸排列
交叉軸是與主軸相反方向的軸。例如，在 FlowRow 中，這是垂直軸。如要變更
容器內的內容會按跨軸排列
FlowRow 為 verticalArrangement，horizontalArrangement 的
FlowColumn。
對於 FlowRow，下表顯示如何設定
優惠內容：verticalArrangement：
已設定 |
結果 |
|
|
|
|
|
如果是 FlowColumn，則可使用 horizontalArrangement 提供的類似選項。
預設的交叉軸排列方式為 Arrangement.Start。
個別項目對齊
建議您替列內的個別項目指定
對齊。這與「verticalArrangement」不同
horizontalArrangement，因為這會將目前委刊項內的委刊項對齊。您可以使用 Modifier.align() 套用此設定。
舉例來說，如果 FlowRow 中的項目高度不同，則該列會採用最大的項目高度，並將 Modifier.align(alignmentOption) 套用至項目：
已設定 |
結果 |
|
|
|
|
|
FlowColumn 也有類似的選項。預設對齊方式為
Alignment.Start。
資料列或資料欄中的項目數量上限
maxItemsInEachRow 或 maxItemsInEachColumn 參數定義了
項目。
預設值為 Int.MAX_INT，可盡可能加入更多項目，、
這樣廣告就會配合設計
例如，設定 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")
}
ContextualFlowRow」的示例商品重量
權重會根據因素和委刊項的可用空間而增加。
重要的是，FlowRow 和 Row 之間有一個差異
以及權重計算項目寬度的方式對於 Rows，權重會根據 Row 中的所有項目計算。使用 FlowRow 時，重量是以
放入項目的委刊項，而不是
FlowRow 容器。
舉例來說，如果有 4 個項目都落在同一行，且各自有不同的 1f, 2f, 1f 和 3f 權重，則總權重為 7f。剩餘空間
資料列或資料欄中的值會除以 7f。接著，每個項目寬度會是
計算方式：weight * (remainingSpace / totalWeight)。
您可以將 Modifier.weight 和最大項目與 FlowRow 或 FlowColumn 搭配使用，建立類似格線的版面配置。這種做法可用於建立可調整為裝置大小的回應式版面配置。
這裡有幾個使用權重可達成的目標。一 範例是一個格狀空間，其中項目的大小都相同，如下所示：
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)
}
}
請注意，如果您再新增一個項目，並且重複 10 次 (而非 9 次)，
最後一個項目會佔據最後一欄的全部
為 1f：
FlowRow 建立格線，並讓最後一個項目佔滿整個寬度您可以將權重與其他 Modifiers 結合，例如 Modifier.width(exactDpAmount), Modifier.aspectRatio(aspectRatio) 或 Modifier.fillMaxWidth(fraction)。這些修飾符會依照
允許在 FlowRow (或 FlowColumn) 中調整項目大小。
您也可以建立不同大小的交替格線，其中有兩個項目 一個項目會佔據下一個寬度的一半 欄：
FlowRow 使用交替大小的列您可以用下列程式碼達成此目標：
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))
}
}
}
比例大小
您可以使用 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)
)
}
|
|
|
|
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)
)
}
}
}
已對每個項目套用「 |
|
未設定寬度變更 (納入項目) |
|
為您推薦
- 注意：系統會在 JavaScript 關閉時顯示連結文字
- Compose 版面配置的基本概念
- Compose 中的 ConstraintLayout
- 編輯者動作 {:#editor-actions}