如何在Jetpack Compose中实现替代已废弃FlowRow的流式布局

方案一：使用官方FlowLayout组件 #

这是官方替代废弃FlowRow的首选方案，属于compose.foundation.layout包，专门适配流式布局需求。

示例代码：

import androidx.compose.foundation.layout.FlowLayout
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Chip
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.unit.dp
import androidx.compose.foundation.layout.Arrangement

@Composable
fun InterestTags(tags: List<String>) {
    FlowLayout(
        contentPadding = PaddingValues(horizontal = 8.dp, vertical = 4.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalArrangement = Arrangement.spacedBy(4.dp)
    ) {
        tags.forEach { tag ->
            Chip(
                onClick = { /* 处理点击逻辑 */ },
                label = { Text(tag) },
                modifier = Modifier.padding(4.dp)
            )
        }
    }
}

FlowLayout会自动根据子项宽度与可用空间判断是否换行，通过horizontalArrangement、verticalArrangement控制子项间距，contentPadding设置整体内边距，完全满足标签列表的基础需求。

方案二：使用LazyVerticalGrid配合自适应列宽 #

如果标签宽度差异不大，可通过LazyVerticalGrid结合GridCells.Adaptive实现类流式效果，适合需要网格规整性的场景。

示例代码：

import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.material3.Chip
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.unit.dp
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues

@Composable
fun InterestTagsGrid(tags: List<String>) {
    LazyVerticalGrid(
        columns = GridCells.Adaptive(minSize = 100.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalArrangement = Arrangement.spacedBy(4.dp),
        contentPadding = PaddingValues(8.dp)
    ) {
        items(tags) { tag ->
            Chip(
                onClick = { /* 处理点击逻辑 */ },
                label = { Text(tag) }
            )
        }
    }
}

GridCells.Adaptive(minSize)会根据设置的最小宽度自动计算每行可容纳的标签数量，超出时自动换行，配置简单且性能稳定。

方案三：自定义流式布局 #

如果官方组件无法满足特殊布局逻辑（比如自定义换行规则、子项对齐方式），可以通过自定义Layout实现完全可控的流式布局。

示例代码：

import androidx.compose.foundation.layout.Layout
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.Measurable
import androidx.compose.ui.layout.MeasureScope
import androidx.compose.ui.unit.Constraints
import androidx.compose.ui.unit.dp

@Composable
fun CustomFlowRow(
    modifier: Modifier = Modifier,
    horizontalSpacing: Int = 8.dp.roundToPx(),
    verticalSpacing: Int = 4.dp.roundToPx(),
    content: @Composable () -> Unit
) {
    Layout(
        modifier = modifier,
        content = content
    ) { measurables: List<Measurable>, constraints: Constraints ->
        val rows = mutableListOf<List<Measurable>>()
        val rowHeights = mutableListOf<Int>()

        var currentRow = mutableListOf<Measurable>()
        var currentRowWidth = 0
        var currentRowHeight = 0

        measurables.forEach { measurable ->
            val placeable = measurable.measure(constraints.copy(minWidth = 0))
            val itemWidth = placeable.width

            if (currentRowWidth + itemWidth + horizontalSpacing > constraints.maxWidth) {
                rows.add(currentRow)
                rowHeights.add(currentRowHeight)
                currentRow = mutableListOf()
                currentRowWidth = 0
                currentRowHeight = 0
            }

            currentRow.add(measurable)
            currentRowWidth += itemWidth + horizontalSpacing
            currentRowHeight = maxOf(currentRowHeight, placeable.height)
        }

        if (currentRow.isNotEmpty()) {
            rows.add(currentRow)
            rowHeights.add(currentRowHeight)
        }

        val totalHeight = rowHeights.sum() + (rows.size - 1) * verticalSpacing
        layout(constraints.maxWidth, totalHeight) {
            var yPosition = 0
            rows.forEachIndexed { rowIndex, row ->
                var xPosition = 0
                val rowHeight = rowHeights[rowIndex]
                row.forEach { measurable ->
                    val placeable = measurable.measure(constraints.copy(minWidth = 0))
                    placeable.placeRelative(x = xPosition, y = yPosition)
                    xPosition += placeable.width + horizontalSpacing
                }
                yPosition += rowHeight + verticalSpacing
            }
        }
    }
}

// 使用示例
@Composable
fun CustomInterestTags(tags: List<String>) {
    CustomFlowRow(
        horizontalSpacing = 8.dp.roundToPx(),
        verticalSpacing = 4.dp.roundToPx()
    ) {
        tags.forEach { tag ->
            Chip(
                onClick = { /* 处理点击逻辑 */ },
                label = { Text(tag) },
                modifier = Modifier.padding(4.dp)
            )
        }
    }
}

自定义Layout通过手动测量每个子项的宽高，计算每行可容纳的子项并处理换行逻辑，适合有个性化布局需求的场景。

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