Jetpack Compose FlowRow

[FlowRow] 是与 Row 和 Column 类似的可组合项，但不同之处在于，当容器空间不足时，项会流向下一行。这会创建多个行或列。您也可以通过设置 maxItemsInEachRow 或 maxItemsInEachColumn 来控制一行中的项目数量。您经常可以使用 FlowRow 和 FlowColumn 来构建自适应布局 - 如果项因一个尺寸而过大，则内容不会被截断；将 maxItemsInEach* 与 Modifier.weight(weight) 结合使用有助于构建在需要时填充/扩大行或列宽度的布局

基本用法

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

@Composable
private fun ChipItem(text:String) {
    OutlinedButton(modifier = Modifier.padding(start = 8.dp), onClick = {}) {
        Text(text = text)
    }
}

流布局的功能

FlowRow 已设置 verticalArrangement	效果
Arrangement.Top (Default)
Arrangement.Bottom
Arrangement.Center

上一篇 Jetpack Compose 条状标签

下一篇 Jetpack Compose 中的 ConstraintLayout