Flutter嵌套PageView时无法从子PageView滚动切换到父PageView第一页怎么解决

嵌套PageView结构中，默认最上层的滚动组件会消费全部滑动事件，子PageView滚动到边界后事件不会向上传递给父PageView，因此无法触发父组件的切页逻辑。

通过NotificationListener监听子PageView的滚动事件，判断子PageView滚动到边界且用户继续向父组件切页方向拖动时，手动控制父PageController执行切页操作。

完整代码实现 #

class NestedPageViewDemo extends StatefulWidget {
  const NestedPageViewDemo({super.key});

  @override
  State<NestedPageViewDemo> createState() => _NestedPageViewDemoState();
}

class _NestedPageViewDemoState extends State<NestedPageViewDemo> {
  // 定义父、子PageView的控制器
  final PageController parentController = PageController();
  final PageController childController = PageController();

  @override
  Widget build(BuildContext context) {
    return PageView(
      controller: parentController,
      children: [
        const Center(child: Text("父组件第一页")),
        // 包裹子PageView监听滚动通知
        NotificationListener<ScrollNotification>(
          onNotification: (notification) {
            // 仅处理滚动更新事件
            if (notification is ScrollUpdateNotification) {
              // 判断子PageView处于第一页，且用户向右拖动（要切到父组件上一页）
              if ((childController.page ?? 0) < 0.1 && notification.delta.dx > 0) {
                // 手动控制父组件切到上一页
                parentController.previousPage(
                  duration: const Duration(milliseconds: 300),
                  curve: Curves.easeInOut,
                );
                // 返回true表示消费当前事件，阻止子PageView继续处理
                return true;
              }
              // 可选：支持子PageView滑到最后一页时切到父组件第三页
              final childPageCount = 2; // 替换为你的子PageView实际页面数量
              if ((childController.page ?? 0) > childPageCount - 1.1 && notification.delta.dx < 0) {
                parentController.nextPage(
                  duration: const Duration(milliseconds: 300),
                  curve: Curves.easeInOut,
                );
                return true;
              }
            }
            // 其余事件交给子PageView处理
            return false;
          },
          child: PageView(
            controller: childController,
            children: const [
              Center(child: Text("子PageView第一页")),
              Center(child: Text("子PageView第二页")),
            ],
          ),
        ),
        const Center(child: Text("父组件第三页")),
      ],
    );
  }

  @override
  void dispose() {
    // 释放控制器资源
    parentController.dispose();
    childController.dispose();
    super.dispose();
  }
}

• 切页动画的时长、动效曲线可根据业务需求自行调整
• 生产环境建议对子PageView的页面数量做动态获取，避免硬编码导致判断错误

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