Flutter中Wrap组件向子组件传递的约束及滚动视图场景差异

和Column/Row在主轴方向无条件传递无限约束不同，Wrap的约束传递逻辑会根据父容器是否为滚动视图而变化，具体分两种场景：

1. 置于滚动视图内（以SingleChildScrollView为例） #

当Wrap的主轴方向和滚动视图的滚动方向一致时（比如示例中Wrap是垂直方向，SingleChildScrollView默认垂直滚动）：

• 主轴方向：Wrap会给子组件传递无最大限制的约束，和Column的行为类似。因为滚动视图允许Wrap在主轴方向无限延伸，子组件可以按照自身的固有大小布局，Wrap会依次排列它们，超出视口的部分可通过滚动查看。
• 交叉轴方向：传递的是滚动视图的可用交叉轴空间（比如屏幕宽度），子组件在交叉轴方向的大小不能超过这个值。

对应的代码示例：

SingleChildScrollView(
  child: Wrap(
     direction: Axis.vertical,
     children: [child1, child2, child3]
   )
)

2. 置于非滚动容器内（以普通Container为例） #

此时Wrap的主轴空间受父容器的约束限制：

• 主轴方向：Wrap会先计算自身可用的主轴空间（比如Container的高度，若未指定则继承父级约束），然后给子组件传递有限的主轴约束——子组件在主轴方向的大小不能超过Wrap当前行/列的剩余空间。如果子组件总大小超过Wrap的主轴可用空间，Wrap会自动换行/换列。
• 交叉轴方向：同样传递父容器的可用交叉轴空间，子组件在该方向的大小不得超出。

对应的代码示例：

Container(  
  child: Wrap(
     direction: Axis.vertical,
     children: [child1, child2, child3]
   )
)

和Column/Row的核心区别 #

Column/Row不管父容器是否支持滚动，都会在主轴方向给子组件传递无限约束，这会导致没有固定大小的子组件报错；而Wrap仅在滚动视图内且主轴与滚动方向一致时，才会在主轴传递无限约束，其他场景下都是传递有限约束，这也是Wrap能自动换行/换列的关键原因。

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