Jetpack Compose：如何让FlowRow子项填充所在行最大宽度？

FlowRow本身不支持通过weight属性让子项填充所在行的可用空间，因为它的布局逻辑是基于子项固有尺寸排列、空间不足时换行，和Row的权重分配逻辑不兼容。要实现兼具自动换行和子项填充行宽的布局，你可以自定义一个Layout组件来实现这个需求。

自定义FillFlowRow组件 #

@Composable
fun FillFlowRow(
    modifier: Modifier = Modifier,
    spacing: Dp = 0.dp,
    content: @Composable () -> Unit
) {
    val density = LocalDensity.current

    Layout(
        modifier = modifier,
        content = content
    ) { measurables, parentConstraints ->
        val spacingPx = density.run { spacing.toPx().toInt() }
        val availableWidth = parentConstraints.maxWidth
        val rows = mutableListOf<List<Measurable>>()
        val currentRow = mutableListOf<Measurable>()
        var currentRowWidth = 0

        // 1. 根据父容器宽度分组，确定每行子项
        for (measurable in measurables) {
            val childMinWidth = measurable.minIntrinsicWidth(parentConstraints.maxHeight)
            val requiredWidth = childMinWidth + if (currentRow.isNotEmpty()) spacingPx else 0

            if (currentRowWidth + requiredWidth <= availableWidth) {
                currentRow.add(measurable)
                currentRowWidth += requiredWidth
            } else {
                rows.add(currentRow.toList())
                currentRow.clear()
                currentRow.add(measurable)
                currentRowWidth = childMinWidth
            }
        }
        if (currentRow.isNotEmpty()) rows.add(currentRow.toList())

        // 2. 测量每行子项，分配均分宽度
        val placeables = mutableListOf<Placeable>()
        var totalHeight = 0
        rows.forEach { row ->
            val rowAvailableWidth = availableWidth - (row.size - 1) * spacingPx
            val childWidth = rowAvailableWidth / row.size
            val childConstraints = parentConstraints.copy(maxWidth = childWidth)
            val rowPlaceables = row.map { it.measure(childConstraints) }
            placeables.addAll(rowPlaceables)
            val rowHeight = rowPlaceables.maxOf { it.height }
            totalHeight += rowHeight + if (totalHeight > 0) spacingPx else 0
        }

        // 3. 布局所有子项
        layout(availableWidth, totalHeight) {
            var xOffset = 0
            var yOffset = 0
            var placeableIndex = 0

            rows.forEach { row ->
                val rowHeight = row.map { placeables[placeableIndex++] }.maxOf { it.height }
                row.forEach { _ ->
                    val placeable = placeables[placeableIndex++]
                    placeable.placeRelative(xOffset, yOffset)
                    xOffset += placeable.width + spacingPx
                }
                xOffset = 0
                yOffset += rowHeight + spacingPx
            }
        }
    }
}

使用示例 #

FillFlowRow(
    modifier = Modifier.fillMaxWidth().padding(16.dp),
    spacing = 8.dp
) {
    // 可动态生成任意数量的子项
    repeat(7) { index ->
        Box(
            modifier = Modifier
                .height(48.dp)
                .background(Color(0xFFE0E0E0)),
            contentAlignment = Alignment.Center
        ) {
            Text("Item $index", fontSize = 16.sp)
        }
    }
}

工作原理 #

1. 分组逻辑：遍历所有子项，结合父容器宽度和子项最小固有宽度，判断当前行是否能容纳下一个子项，空间不足时自动换行分组。
2. 宽度分配：对每行子项，计算该行可用宽度（扣除子项间距），将宽度均分分配给每个子项。
3. 布局排列：按行依次放置子项，设置正确的偏移量保证子项对齐和间距。

为什么FlowRow的weight不生效？ #

FlowRow的核心逻辑是先测量子项固有尺寸，再按顺序排列，剩余空间不足时换行。而Row的weight属性依赖于先分配剩余空间给带权重的子项的逻辑，两者的布局测量流程完全不同，直接在FlowRow子项中使用weight会导致子项试图占据整行宽度，无法实现多子项换行的效果。

内容的提问来源于stack exchange，提问作者Meyben