Flutter Wrap如何实现单行/多行展示不同子组件且无需手动测宽

完全可以实现，全程依托Flutter内置组件即可完成，不需要手动测量屏幕宽度、也不需要逐个子组件探测渲染尺寸，不需要额外引入第三方依赖。

核心是借助LayoutBuilder在布局阶段提前拿到可用宽度，提前完成样式切换判断，完全绕开“等Wrap换行了再去感知状态改样式”的被动逻辑：

• LayoutBuilder在每次布局触发时，会把父组件分配的最大可用宽度（也就是单行排布的总宽度上限）直接通过回调返回，不需要手动通过MediaQuery读屏幕宽度，也不用额外写屏幕旋转、窗口缩放的监听逻辑，约束变化时框架会自动重新触发计算。
• 提前为每个待展示组件准备两套渲染样式：单行能放下时用的宽松常规版、超容量时用的紧凑版，两套样式的宽度是组件本身可提前定义的固定值（比如固定内边距的按钮长度、固定短文本的标签宽度），不需要运行时临时测量。
• 在LayoutBuilder的回调里逐次累加常规版组件的宽度：累加值没超过可用宽度时，全部渲染常规版；一旦累加值超过行宽上限，后续所有组件统一切换为紧凑版，最后把生成的组件列表传给Wrap排布即可。

简单的实现示例：

LayoutBuilder(
  builder: (context, constraints) {
    final maxLineWidth = constraints.maxWidth;
    double occupiedWidth = 0;
    final childWidgets = <Widget>[];
    for (final item in componentList) {
      // 两个版本的宽度是组件定义好的固定参数，无需运行时测量
      const normalVersionWidth = 130.0;
      const compactVersionWidth = 64.0;
      const wrapGap = 8.0; // 对应Wrap的spacing值

      if (occupiedWidth + normalVersionWidth <= maxLineWidth) {
        childWidgets.add(item.buildNormalStyle());
        occupiedWidth += normalVersionWidth + wrapGap;
      } else {
        childWidgets.add(item.buildCompactStyle());
        occupiedWidth += compactVersionWidth + wrapGap;
      }
    }
    return Wrap(
      spacing: wrapGap,
      runSpacing: 8,
      children: childWidgets,
    );
  },
)

如果组件的宽度不是固定值，无法提前定义固有宽度，可以用CustomMultiChildLayout搭配自定义布局委托实现：布局委托在performLayout阶段会自动拿到框架完成测量后的所有子组件实际宽度，不需要手动调用测量方法，遍历计算到发生换行的节点后，直接给对应子组件传入紧凑样式的配置即可，全程不需要手写手动测量的逻辑。

• 不要用给子组件挂GlobalKey、渲染完成后读RenderBox尺寸的方案，这种方式会额外触发一次渲染帧，出现样式闪烁的问题；基于布局约束的预计算是同步完成的，不会有闪烁感。
• 计算宽度时记得把Wrap设置的横向间距值算进去，否则会出现宽度判断偏差，提前触发紧凑样式切换。

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