Flutter底部导航同级页面使用WillPopScope仅单一生效的原理咨询

WillPopScope 核心运行逻辑 #

• WillPopScope 依赖当前组件上下文对应的 ModalRoute 实例工作，组件初始化时会把自身的 onWillPop 回调注册到所属路由的回调队列中，组件销毁时注销回调
• 系统返回键被点击时，Flutter 只会触发当前路由栈最顶层路由的回调队列，队列内的回调按倒序（后注册的先执行）依次调用
• 任意回调返回 Future.value(false) 时，会直接中断后续回调执行，同时终止系统返回操作；所有回调都返回 Future.value(true) 时，才会执行路由pop操作

底部导航场景回调异常的原因 #

你实现的四个底部导航同级页面，本质是在同一个顶层路由下做组件的显隐切换（通常用 IndexedStack、PageView 等组件实现），所有子页面的 WillPopScope 都注册到了同一个路由的回调队列中。不管你切换到哪个子页面，路由的回调队列是固定的，永远按注册顺序倒序执行回调，所以只会触发最先响应的那个页面的逻辑，和你当前展示哪个页面无关。

适配方案 #

不需要给每个子页面单独加 WillPopScope，仅在底部导航父容器外层统一加一个 WillPopScope，回调内先判断当前激活的页面索引，再执行对应页面的返回逻辑即可：

示例代码参考：

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

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;
  final List<Widget> _pages = const [Page1(), Page2(), Page3(), Page4()];

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        // 根据当前激活页面执行对应返回逻辑
        switch(_currentIndex) {
          case 0:
            // 执行页面1的返回逻辑，比如二次确认退出App
            return true;
          case 1:
            // 执行页面2的返回逻辑，比如返回页面1
            setState(() => _currentIndex = 0);
            return false;
          // 剩余页面逻辑同理补充
          default:
            return true;
        }
      },
      child: Scaffold(
        body: IndexedStack(
          index: _currentIndex,
          children: _pages,
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          onTap: (index) => setState(() => _currentIndex = index),
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: "页面1"),
            BottomNavigationBarItem(icon: Icon(Icons.list), label: "页面2"),
            BottomNavigationBarItem(icon: Icon(Icons.message), label: "页面3"),
            BottomNavigationBarItem(icon: Icon(Icons.person), label: "页面4"),
          ],
        ),
      ),
    );
  }
}

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