Flutter能否仅在Expanded区域内使用PageView而非全屏？

能否仅在以下代码的Expanded组件范围内使用PageView，实现仅该区域内左右滑动切换内容，而非全屏滑动？

原始代码：

class _MyHomeScreenState extends State<MyHomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        children: [
          Container(),
          Container(),
          Expanded(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Container(),
                  Container(),
                  ListView.builder(itemBuilder: itemBuilder),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

尝试修改后出现错误 Horizontal viewport was given unbounded height，修改后的代码：

class _MyHomeScreenState extends State<MyHomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        children: [
          Container(),
          Container(),
          PageView(
            children: [
              Container(
                child: Expanded(
                  child: SingleChildScrollView(
                    child: Column(
                      children: [
                        Container(),
                        Container(),
                        ListView.builder(itemBuilder: itemBuilder),
                      ],
                    ),
                  ),
                ),
              ),
              Container(),
            ],
          ),
        ],
      ),
    );
  }
}

错误根源是Column垂直方向无边界约束，直接将PageView放入Column后，PageView无法确定自身高度，从而触发报错。要实现目标，需把PageView放到原Expanded内部，利用Expanded获取Column剩余的垂直空间，同时处理子页面内滚动组件的高度冲突问题。

正确代码示例：

class _MyHomeScreenState extends State<MyHomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        children: [
          // 顶部固定的两个容器
          Container(height: 50, color: Colors.blue),
          Container(height: 50, color: Colors.green),
          // 用Expanded包裹PageView，获取剩余垂直空间
          Expanded(
            child: PageView(
              children: [
                // 第一个页面：包含滚动内容
                SingleChildScrollView(
                  child: Column(
                    children: [
                      Container(height: 100, color: Colors.orange),
                      Container(height: 100, color: Colors.purple),
                      // ListView.builder需设置shrinkWrap: true自适应高度，同时禁用自身滚动避免冲突
                      ListView.builder(
                        shrinkWrap: true,
                        physics: const NeverScrollableScrollPhysics(),
                        itemCount: 20,
                        itemBuilder: (context, index) {
                          return ListTile(title: Text('Item $index'));
                        },
                      ),
                    ],
                  ),
                ),
                // 第二个页面：示例内容
                Container(color: Colors.red, alignment: Alignment.center, child: const Text('第二页')),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

关键修改点：

• 将PageView置于原Expanded组件内部，由Expanded提供明确的垂直高度约束，解决unbounded height问题。
• 子页面内的ListView.builder设置shrinkWrap: true，让其根据内容自适应高度；添加physics: NeverScrollableScrollPhysics()，避免内部ListView和外层SingleChildScrollView的滚动冲突。
• 移除错误代码中PageView子项里的Expanded（Expanded仅能在Column/Row/Flex中使用，放在Container里无效）。

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