Flutter中使用ListView.builder时如何让子控件自动换行？

你当前使用ListView.builder搭配Row的实现逻辑无法满足多标签自动换行的需求，原因是ListView会将每个子元素按滚动方向独立排列，无法实现同排放置多个标签的效果。

Flutter官方提供了专门应对流式自动换行布局的Wrap组件，可直接实现超出宽度自动换行的效果，修改后的代码如下：

Container(
  // 移除固定height属性，Wrap会根据标签数量自动计算适配高度
  padding: const EdgeInsets.symmetric(horizontal: 8),
  child: Wrap(
    spacing: 4, // 同排标签之间的水平间距，可按需调整
    runSpacing: 2, // 相邻两行标签之间的垂直间距，可按需调整
    children: brandmodels[index].tags.map((tag) {
      return Row(
        mainAxisSize: MainAxisSize.min, // 让Row仅占用自身内容所需的最小宽度，避免默认占满整行
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: CircleAvatar(
              radius: 5,
              backgroundColor: Color(0xffC4C4C4)
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(right: 8.0),
            child: Text(tag),
          ),
        ],
      );
    }).toList(),
  ),
)

关键配置说明 #

• Wrap组件会自动测量子组件宽度，当一行放不下时自动将后续子组件放到下一行渲染，不会出现RenderFlex溢出报错
• 每个标签对应的Row必须设置mainAxisSize: MainAxisSize.min，否则每个Row都会默认占满父容器的整行宽度，无法实现多个标签同排展示
• 可根据UI需求调整spacing和runSpacing的数值，调整标签之间的间距效果

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