如何在Flutter的ListView中嵌套PageView？解决未绑定高度报错

问题描述 #

在ListView中嵌套PageView实现横向滚动时，出现了unbound height错误。尝试过将PageView放入Container或SizedBox（该方法在Column中可解决同类问题），但在ListView中无效，仍触发相同错误。相关代码如下：

class HomePage extends Stateful Widget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          padding: const EdgeInsets.all(24),
          children: [
            SomeWidget(),

            // Dropdown status
            SizedBox(height: 16),
            SomeWidget(),

            // The Pageview
            SizedBox(height: 16),
            Expanded(
              child: PageView(
                children: <Widget>[
                  SizedBox(height: 100, child: Container(color: Colors.red)),
                  Container(color: Colors.blue),
                  Container(color: Colors.yellow),
                  Container(color: Colors.amber),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

解决思路与修正代码 #

问题根源 #

1. ListView作为垂直滚动组件，其子组件需要明确的高度约束，但PageView本身是无边界高度的组件；
2. 在ListView子组件中使用Expanded完全无效——Expanded仅能在Column/Row/Flex这类具备主轴约束的组件中生效，反而会加剧高度约束缺失的问题。

修正方案 #

直接给PageView外层套一个固定高度的容器（如SizedBox或Container），明确其高度即可，无需使用Expanded。

修正后的代码：

class HomePage extends Stateful Widget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          padding: const EdgeInsets.all(24),
          children: [
            SomeWidget(),

            // Dropdown status
            SizedBox(height: 16),
            SomeWidget(),

            // The Pageview
            SizedBox(height: 16),
            // 为PageView指定固定高度
            SizedBox(
              height: 100, // 根据需求调整高度数值
              child: PageView(
                children: <Widget>[
                  Container(color: Colors.red),
                  Container(color: Colors.blue),
                  Container(color: Colors.yellow),
                  Container(color: Colors.amber),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

额外优化建议 #

• 若不想使用固定数值高度，可通过MediaQuery获取屏幕高度比例来适配不同设备，例如：

  height: MediaQuery.of(context).size.height * 0.2,
  

• PageView的子组件无需额外指定高度（特殊需求除外），会自动继承外层容器的高度。

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