Flutter 横向ListView内Container指定height为何仍撑满父容器高度

这个问题本质是Flutter布局的约束优先级规则、横向滚动ListView的默认交叉轴约束逻辑共同导致的，和Container的官方实现逻辑不存在冲突。

• Flutter布局的基础逻辑永远是父级约束优先于子组件自定义尺寸：子组件的最终尺寸，不能超出父组件给定的约束范围。官方文档中提到的"Container会结合自身约束与父组件约束尽可能缩小尺寸"，有一个隐含前提：父组件没有给出强制紧约束，允许Container按照自身设置的宽高取值。
• 横向滚动ListView的约束传递特性：
  • 滚动方向（水平方向）：ListView会放松约束，允许子组件自定义宽度，这也是代码中Container(width:100)能正常生效的原因。
  • 非滚动交叉轴（垂直方向）：ListView会给所有子组件传递一个固定值的紧约束——强制子组件的高度必须等于ListView自身的可用高度。这是所有可滚动组件的通用设计，和子组件自身设置了多少高度无关。
• 代码中设置的shrinkWrap: true对解决这个问题完全没有帮助：这个参数只控制ListView在自身滚动方向的尺寸计算（也就是水平方向会根据子组件总宽度收缩），不会修改垂直方向的强制撑满规则。
  也就是说，设置的Container(height:20)之所以没生效，是因为父级ListView给出的垂直方向约束要求子组件必须撑满自身高度，在Flutter的约束规则下，子组件无法违背父级的强制要求，自定义的20高度会被直接覆盖。

要让Container的自定义高度生效，只需要打破ListView在垂直方向的无限制撑满约束，给ListView本身设置对应需要的高度即可，参考实现：

// 给ListView外层包裹固定高度的容器，限制ListView自身的高度上限
Container(
  height: 20,
  child: ListView(
    scrollDirection: Axis.horizontal,
    children: [
      Container(
        width: 100,
        color: Colors.red,
      )
    ],
  ),
)

调整后ListView自身的高度被限制为20，它传递给子组件的垂直方向紧约束也会同步变为20，和Container的预期尺寸匹配，不会再出现撑满整个屏幕高度的问题。 #

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