如何在Row中使用ListView.builder实现流式对齐布局？

问题根源 #

你用的ListView.builder是垂直滚动列表组件，它会强制每个子Widget单独占一行，完全做不到流式自动换行的效果，这就是你的标签会垂直排列的原因。

解决方案 #

把ListView.builder换成Wrap组件——这是Flutter专门用来实现流式布局的组件，当一行空间放不下下一个标签时，会自动换行到下一行。

修改后的核心代码如下：

Row(
  children: [
    Expanded(
      flex: 5,
      child: Wrap(
        spacing: 8.0, // 标签间的水平间距，可按需调整
        runSpacing: 8.0, // 行与行的垂直间距，可按需调整
        children: interests, // 直接传入你的标签Widget列表即可
      ),
    ),
  ],
)

关于移除Expanded报错的说明 #

你的布局层级是Dialog > SingleChildScrollView > Column，Column本身不会约束子组件的高度，而Wrap没有固定高度，必须用Expanded让它占据Column分配的可用垂直空间，否则会触发布局约束冲突错误，所以Expanded不能随意移除。

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