Flutter中ListView嵌套Wrap实现可换行标签列表异常问题

你的代码里有两个核心问题导致无法实现自动换行：

1. 错误使用横向ListView：设置了scrollDirection: Axis.horizontal，强制容器横向排列，Wrap组件被限制在横向滚动的ListView中，自然没法换行。
2. 重复生成Wrap：ListView.builder的itemCount设为文档总数，会循环生成N个Wrap，每个Wrap里都包含所有标签，既冗余又破坏布局。

修改后的代码 #

直接用Wrap组件替代ListView，不需要额外的列表构建器：

FutureBuilder _buildSubCategories() {
  return FutureBuilder(
      future: cats
          .doc(widget.catId)
          .collection('sub-categories')
          .orderBy('name')
          .get(),
      builder: (ctx, AsyncSnapshot snapshot) {
        if (!snapshot.hasData) {
          return const Center(child: CircularProgressIndicator.adaptive());
        } else {
          // 直接用Wrap包裹所有ActionChip，自动换行
          return Wrap(
            spacing: 8.0, // 标签之间的横向间距
            runSpacing: 8.0, // 行与行之间的纵向间距
            children: snapshot.data.docs
                .map((item) => ActionChip(
                      label: Text(item['name']),
                    ))
                .toList()
                .cast<Widget>(),
          );
        }
      });
}

可选优化（如果标签过多需要滚动） #

如果标签数量太多超出屏幕高度，可以把Wrap放在SingleChildScrollView里：

return SingleChildScrollView(
  child: Wrap(
    spacing: 8.0,
    runSpacing: 8.0,
    children: snapshot.data.docs
        .map((item) => ActionChip(label: Text(item['name'])))
        .toList()
        .cast<Widget>(),
  ),
);

这样就能实现你想要的自动换行标签布局了。

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