实现可自适应换行的ListView/GridView：替换多行Row布局

嘿，你现在用多行Row来实现标签换行确实不够灵活，每次手动拆分标签太麻烦了！其实Flutter里有个专门处理这种流式自动换行布局的组件——Wrap，它比ListView/GridView更适配这个场景（当然如果你坚持要用GridView，我也会给你对应的实现方案）。

1. 先定义可复用的TagContainer组件 #

先把你的圆角红色标签组件封装好，确保它能灵活适配不同长度的文本：

class TagContainer extends StatelessWidget {
  final String name;

  const TagContainer({super.key, required this.name});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
      decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.circular(20),
      ),
      child: Text(
        name,
        style: const TextStyle(color: Colors.white),
      ),
    );
  }
}

2. 用Wrap组件替代多行Row #

把所有标签放到Wrap里，它会自动根据父容器的可用宽度判断是否换行，还能统一设置标签间的水平/垂直间距，完全不用手动拆分Row：

class TagWrapDemo extends StatelessWidget {
  const TagWrapDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Wrap(
        // 标签之间的水平间距
        spacing: 8.0,
        // 行与行之间的垂直间距
        runSpacing: 8.0,
        children: const [
          TagContainer(name: 'LoreIpsumLoreIpsum'),
          TagContainer(name: 'LoreIpsum'),
          TagContainer(name: 'LoreIpsum'),
          TagContainer(name: 'LoreIpsumLore'),
          TagContainer(name: 'Lore'),
          // 随便新增标签也会自动适配换行
          TagContainer(name: 'SuperLongTagThatNeedsToWrap'),
        ],
      ),
    );
  }
}

如果你坚持要用GridView实现？ #

如果一定要用GridView来做，可以设置crossAxisCount为一个足够大的数值（比如100），让它自适应标签宽度，同时开启shrinkWrap避免占用过多不必要的空间：

class TagGridViewDemo extends StatelessWidget {
  const TagGridViewDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: GridView.count(
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(), // 不需要滚动时加上这个
        crossAxisCount: 100, // 足够大的数值让标签自适应宽度
        crossAxisSpacing: 8.0,
        mainAxisSpacing: 8.0,
        children: const [
          TagContainer(name: 'LoreIpsumLoreIpsum'),
          TagContainer(name: 'LoreIpsum'),
          TagContainer(name: 'LoreIpsum'),
          TagContainer(name: 'LoreIpsumLore'),
          TagContainer(name: 'Lore'),
        ],
      ),
    );
  }
}

不过还是更推荐用Wrap，它是Flutter专门为这种流式换行场景设计的组件，代码更简洁，布局行为也更符合预期～

内容的提问来源于stack exchange，提问作者Victor Roberti Camolesi