Flutter开发：如何实现Row布局内组件自动换行 无需手动拆分行

• 原生Row组件完全不支持自动换行：它的设计定位就是单轴水平排布，子元素总宽度超出容器可用宽度时，会直接触发布局溢出报错，不会自动拆分出多行。
• 不需要手动检测宽度、拆分列表做适配：Flutter内置了专门适配流式自动换行场景的Wrap组件，直接就能满足动态按钮组的自动换行需求。

你现在在Row里穿插Spacer的写法，本质是靠Spacer吃掉Row的剩余空间来实现间隔均分，一旦按钮总宽度超过屏幕可用宽度，Row会直接出现溢出报错，既不会自动换行，也没法正确计算排布间隔。

直接把外层Row替换为Wrap组件即可，完全不需要手写宽度测量逻辑：

• Wrap的核心逻辑就是水平方向剩余空间放不下下一个子元素时，自动把子元素挪到下一行排布，全程自动适配宽度。
• 不需要手动穿插Spacer实现间隔：给Wrap设置spacing参数即可控制同一行内相邻按钮的水平间距，设置runSpacing即可控制不同行之间的垂直间距，排布的均匀度比手动插Spacer更好，不会出现最后一行间距偏移的问题。

适配你原有逻辑的参考代码：

return Wrap(
  spacing: 8, // 替换原Spacer的水平间隔效果
  runSpacing: 8, // 多行之间的垂直间距
  children: List.generate(count, (i) {
    return ElevatedButton( // 注：RaisedButton已从官方组件库废弃，推荐用同能力的ElevatedButton
      child: Text(i.toString()),
      onPressed: (){...},
    );
  }),
)

如果存在特殊排版需求，必须手动控制换行位置，可以参考这套通用测量逻辑：

• 通过MediaQuery获取当前屏幕可用宽度，减去外层容器的padding、margin等固定占位，得到排布按钮的总宽度阈值。
• 给每个按钮绑定独立GlobalKey，在组件首帧渲染完成后，通过key.currentContext.size读取每个按钮的实际渲染宽度。
• 累加按钮宽度，当累计值超过可用宽度阈值时，就把已统计的按钮拆分为单独一行，最终将拆分好的按钮列表逐行用Row渲染即可。
  注：这类手动方案仅适用于需要自定义换行规则的特殊场景，常规按钮组、标签组场景优先用内置Wrap组件，性能和稳定性远好于手动计算的实现。

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