Flutter：如何让水平ListView仅占用子项所需高度？

嘿，这个问题我之前也踩过坑！Flutter的ListView在设置为横向滚动（scrollDirection: Axis.horizontal）时，确实会默认占满垂直方向（交叉轴）的所有可用空间，没法自动适配子项的高度。不过咱们有几个实用的方案可以搞定这个需求：

方案一：自适应任意子项高度（推荐） #

用SingleChildScrollView + IntrinsicHeight + Row的组合，既能实现横向滚动，又能让整个滚动区域的高度自动匹配子项中最高的那个，完全不用手动指定高度：

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: IntrinsicHeight(
    child: Row(
      children: [
        Container(height: 50, width: 100, color: Colors.red),
        Container(height: 70, width: 100, color: Colors.blue),
        Container(height: 60, width: 100, color: Colors.green),
      ],
    ),
  ),
)

• SingleChildScrollView负责提供横向滚动能力；
• IntrinsicHeight会让内部的Row高度自动对齐到最高子项的高度；
• Row用来横向排列所有子项，配合滚动实现列表效果。

方案二：固定高度（适合子项高度统一的场景） #

如果你的所有子项高度都是固定的，那可以直接给ListView套一个ConstrainedBox，手动限制它的最大高度，这样就不会撑满屏幕了：

ConstrainedBox(
  constraints: BoxConstraints(maxHeight: 60), // 这里设置为子项的固定高度
  child: ListView(
    scrollDirection: Axis.horizontal,
    children: [
      Container(height: 60, width: 100, color: Colors.red),
      Container(height: 60, width: 100, color: Colors.blue),
    ],
  ),
)

为什么原生ListView做不到？ #

Flutter的ListView本身没有提供直接控制交叉轴收缩的属性（比如类似shrinkWrap的交叉轴版本），因为它的设计初衷就是尽可能利用交叉轴的可用空间。所以咱们只能通过组合其他组件来实现自适应高度的效果。

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