PageView子页面WillPopScope失效，如何实现返回至首页？

问题原因 #

PageView的所有子页面都属于同一个路由上下文，子页面中的WillPopScope无法拦截全局的返回键事件——返回事件由当前路由的最外层上下文处理，子页面的拦截逻辑不会触发，按下返回键会直接回到当前路由之前的页面。

可行方案 #

方案1：在首页最外层包裹WillPopScope拦截返回事件 #

直接在首页的Scaffold外层添加WillPopScope，根据当前页面索引判断处理逻辑：

• 如果当前不是首页（currentIndex != 0），则跳转至首页并拦截返回事件
• 如果当前是首页，则允许返回上一个路由（退出或回到之前的页面）

修改后的首页代码示例：

Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: () async {
      if (currentIndex != 0) {
        // 跳转到首页
        _pageController.animateToPage(
          0,
          duration: const Duration(milliseconds: 200),
          curve: Curves.ease,
        );
        // 拦截返回事件
        return false;
      }
      // 首页时允许返回上一个路由
      return true;
    },
    child: SafeArea(
      child: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          backgroundColor: Theme.of(context).primaryColor,
          selectedItemColor: Colors.white,
          unselectedItemColor: Colors.grey[400],
          currentIndex: currentIndex,
          onTap: (int newIndex) {
            setState(() {
              _pageController.animateToPage(
                newIndex,
                duration: const Duration(milliseconds: 200),
                curve: Curves.ease,
              );
            });
          },
          items: const [
            BottomNavigationBarItem(
              label: 'Home',
              icon: Icon(Icons.home),
            ),
            BottomNavigationBarItem(
              label: 'Prayers',
              icon: ImageIcon(AssetImage('assets/icons/union.png')),
            ),
            BottomNavigationBarItem(
              label: 'Attendance',
              icon: ImageIcon(AssetImage('assets/icons/inscription.png')),
            ),
            BottomNavigationBarItem(
              label: 'Setting',
              icon: Icon(Icons.settings),
            ),
          ],
        ),
        body: SizedBox.expand(
          child: PageView(
            controller: _pageController,
            onPageChanged: (index) {
              setState(() {
                currentIndex = index;
              });
            },
            physics: const NeverScrollableScrollPhysics(),
            children: [
              const MainMenuPage(),
              PrayersPage(controller: _pageController,),
              Container(color: Colors.indigo,),
              Container(color: Colors.teal,),
            ],
          ),
        ),
      ),
    ),
  );
}

方案2：子页面自定义返回逻辑（如需额外处理） #

如果某些子页面需要在返回首页前执行特定逻辑（比如保存数据、弹窗确认），可以给子页面传递回调函数，或结合PageController实现：

1. 在子页面中定义返回首页的方法，比如void goBackToHome()
2. 子页面执行完自定义逻辑后，调用该方法通过PageController跳转至首页，外层的WillPopScope仍统一拦截全局返回事件

方案1是最简洁通用的实现方式，适合大多数场景。

内容的提问来源于stack exchange，提问作者Anang Hariyanto N