Flutter PageView嵌套ListView报Horizontal viewport unbounded height错误

错误原因 #

这个报错的核心是PageView没有拿到明确的高度约束：

• PageView放在Column组件中，Column在垂直方向不会给子元素提供默认的高度约束，会允许子元素无限拉伸
• PageView默认需要填充父容器的可用空间，拿到无限高度的约束后就触发了视口越界的断言

你之前查到的加固定尺寸SizedBox的方案其实逻辑是对的，只是硬写固定高度适配不同屏幕兼容性差，也不符合你要占满剩余屏幕空间的需求，用下面的方案调整即可：

解决方案 #

只需修改两处代码即可正常运行：

修改点1：给PageView外层加Expanded #

修改Home组件中Column的子项部分，给PageView.builder包裹Expanded，让它自动占满Column中除了顶部占位Container之外的所有剩余高度：

Column(
  children: [
    Container(
      height: constraints.maxHeight * 0.175,
    ),
    // 新增Expanded包裹PageView
    Expanded(
      child: PageView.builder(
          itemBuilder: (ctx, i) => WeatherCityItem(constraints: constraints)),
    )
  ],
)

修改点2：去掉WeatherCityItem外层的Expanded #

PageView的子项会自动适配PageView的尺寸，外层不需要再加Expanded，直接返回ListView即可：

class WeatherCityItem extends StatelessWidget {
  var constraints;
  WeatherCityItem({Key? key, this.constraints}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 去掉外层的Expanded，直接返回ListView
    return ListView(
      physics: const BouncingScrollPhysics(),
      padding: const EdgeInsets.symmetric(
          vertical: 0, horizontal: 20),
      // 其余原有代码保持不变
      children: [
        // ... 原有子组件代码
      ],
    );
  }
}

调整完成后就能正常实现横向滑动切换页面、每个页面纵向滚动的效果，同时会自动适配不同尺寸的设备屏幕。

内容的提问来源于stack exchange，提问作者David Meléndez