Flutter：垂直ListView内嵌水平ListView实现动态高度适配全屏幕

问题分析 #

你当前用屏幕高度比例设置水平ListView的容器高度（MediaQuery.of(context).size.height/3.3），这种方式在手机上能正常显示，但iPad这类大屏设备会因为容器高度无法匹配子项实际高度，导致overflow问题。下面提供几种动态适配的方案：

方案一：用IntrinsicHeight自适应子项高度 #

直接让水平ListView的高度匹配子项的最大高度，无需手动设置固定高度：

ListView(
  children: [
    IntrinsicHeight(
      child: ListView.builder(
        shrinkWrap: true,
        controller: _scrollController,
        scrollDirection: Axis.horizontal,
        itemCount: newlyProduct.length,
        itemBuilder: (context, index) => YourProductItem(), // 替换为你的商品子组件
      ),
    ),
  ],
)

IntrinsicHeight会自动计算子组件的最高高度，确保容器能完全容纳所有子项，适配任意屏幕尺寸。

方案二：基于子项固定高度设置容器 #

如果你的商品卡片有固定高度（比如200），直接使用这个固定值是最稳妥的方式：

ListView(
  children: [
    SizedBox(
      height: 200, // 替换为你的子项实际固定高度
      child: ListView.builder(
        shrinkWrap: true,
        controller: _scrollController,
        scrollDirection: Axis.horizontal,
        itemCount: newlyProduct.length,
        itemBuilder: (context, index) => YourProductItem(),
      ),
    ),
  ],
)

这种方式完全避免了屏幕比例带来的适配问题，只要子项高度固定，就不会出现overflow。

方案三：基于屏幕宽度比例设置高度 #

如果需要保持卡片的宽高比，可改用屏幕宽度的比例来计算高度，适配不同屏幕的宽高特性：

ListView(
  children: [
    Container(
      height: MediaQuery.of(context).size.width * 0.6, // 按宽度的60%设置高度，可根据需求调整比例
      child: ListView.builder(
        shrinkWrap: true,
        controller: _scrollController,
        scrollDirection: Axis.horizontal,
        itemCount: newlyProduct.length,
        itemBuilder: (context, index) => YourProductItem(),
      ),
    ),
  ],
)

平板的宽度远大于手机，按宽度比例设置高度能保证卡片的视觉比例一致，同时避免容器高度不足导致的overflow。

注意事项 #

• 确保你的商品子组件（YourProductItem）没有未约束的高度组件，否则IntrinsicHeight无法正确计算高度。
• shrinkWrap: true会让水平ListView根据内容调整自身尺寸，结合上述方案使用效果更佳。

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