Jetpack Compose：空间不足时如何自动换行添加新行

架构老林

2026-8-21

在Jetpack Compose中实现自动换行的流式布局

你当前用的Row是单行布局，超出屏幕宽度后会导致内容溢出或需要横向滚动。要实现自动换行效果，直接用**FlowRow**组件替代Row即可——它是Jetpack Compose专门用于流式排列的布局组件，会根据可用宽度自动换行。

修改后的代码示例

FlowRow(
    modifier = modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically,
    // 可选：设置子组件之间的水平间距
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    // 可选：设置行与行之间的垂直间距
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    mySet.forEach { something ->
        MyComposableStuff(
            ...
        )
    }
}

关键说明

FlowRow属于androidx.compose.foundation.layout包（若使用Material3库，也可以用androidx.compose.material3.FlowRow，功能一致）。
它会自动计算每个子组件的宽度，当当前行剩余空间不足以容纳下一个子组件时，自动将其放到下一行。
通过horizontalArrangement和verticalArrangement可以灵活控制子组件的间距与排列方式，优化布局美观度。
如果你的MyComposableStuff需要固定宽度或自适应宽度，可以在其内部的modifier中设置（比如width(100.dp)或width(IntrinsicSize.Min)），帮助FlowRow更精准地判断换行时机。