Flutter：如何实现无固定高度水平ListView并消除底部空隙？

问题根源在于水平方向的ListView中，子项默认会根据自身内容自适应垂直高度，当内容高度小于父容器的500px时，就会出现底部空隙。以下是两种无需使用SingleChildScrollView或FittedBox的解决方案：

方法一：强制子项占满父容器高度 #

给每个子项Container设置height: double.infinity，让子项自动继承父级SizedBox的固定高度，无论内容多少都能填满垂直空间：

SizedBox(
  height: 500,
  child: ListView.separated(
    itemCount: 5,
    scrollDirection: Axis.horizontal,
    separatorBuilder: (context, index) => const SizedBox(width: 20),
    itemBuilder: (context, index) => Container(
      height: double.infinity, // 强制占满父容器垂直高度
      color: Colors.grey[200], // 示例背景色
      // 子项内容
    ),
  ),
)

方法二：用ConstrainedBox约束子项最小高度 #

如果担心double.infinity在某些场景下的兼容性，可以用ConstrainedBox设置子项的最小高度为500，确保子项高度不低于父容器：

SizedBox(
  height: 500,
  child: ListView.separated(
    itemCount: 5,
    scrollDirection: Axis.horizontal,
    separatorBuilder: (context, index) => const SizedBox(width: 20),
    itemBuilder: (context, index) => ConstrainedBox(
      constraints: const BoxConstraints(minHeight: 500),
      child: Container(
        color: Colors.grey[200], // 示例背景色
        // 子项内容
      ),
    ),
  ),
)

这两种方法都能确保子项高度与父容器的500px保持一致，彻底解决底部空隙问题。

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