如何根据屏幕/父组件宽度限制一行可容纳的Widget数量

直接用OverflowBar替代Wrap就能满足你的需求，它天生支持单行布局，会自动根据父组件的可用宽度显示能完整容纳的所有Chip，超出的部分直接隐藏，完全不用手动测量每个标签的宽度。

基础用法示例 #

ListTile(
  title: const Text('示例内容'),
  subtitle: OverflowBar(
    spacing: 8.0, // 控制Chip之间的间距
    overflow: OverflowBarOverflow.hide, // 超出空间的Chip直接隐藏
    children: [
      const Chip(label: Text('分类A')),
      const Chip(label: Text('分类B')),
      const Chip(label: Text('分类C')),
      const Chip(label: Text('分类D')),
      const Chip(label: Text('分类E')),
    ],
  ),
)

注意事项 #

• OverflowBar是Flutter 3.7.0及以上版本新增的组件，如果你的项目使用的Flutter版本较低，建议升级SDK以使用这个组件。
• 如果无法升级SDK，也可以用ClipRect+SingleChildScrollView的组合实现近似效果，但这种方式会裁剪超出的Chip（可能只显示一半），而非完全隐藏未适配的Chip：

ListTile(
  title: const Text('示例内容'),
  subtitle: ClipRect(
    child: SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      physics: const NeverScrollableScrollPhysics(), // 禁止横向滚动
      child: Row(
        children: [
          const Chip(label: Text('分类A')),
          const SizedBox(width: 8),
          const Chip(label: Text('分类B')),
          const SizedBox(width: 8),
          const Chip(label: Text('分类C')),
          const SizedBox(width: 8),
          const Chip(label: Text('分类D')),
        ],
      ),
    ),
  ),
)

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