升级auto_route至9.2.2后Android返回键直接关闭Flutter应用

问题描述 #

升级auto_route至^{9.2.2版本后，使用AutoTabsScaffold管理路由时，按下Android设备返回键会直接关闭应用，而在}5.0.3版本中该功能正常。

路由配置示例 #

AutoRoute(
  path: 'a',
  page: A.page,
  children: [
    AutoRoute(
      initial: true,
      page: B.page,
    ),
    AutoRoute(
      page: C.page,
    ),
    AutoRoute(
      page: D.page,
    ),
    AutoRoute(
      page: E.page,
    ),
    AutoRoute(
      page: F.page,
    ),
  ],
),

AutoTabsScaffold(
  routes: [
    B(),
    C(),
    D(),
    E(),
    F(),
  ],
  bottomNavigationBuilder: (_, tabsRouter) {
    return BottomNavigationBar(...);
  },
),

开发环境 #

[√] Flutter (Channel stable, 3.24.3, on Microsoft Windows [Versión 10.0.22631.3880], locale es-419)
    • Flutter version 3.24.3 on channel stable at C:\Users\Liam\dev\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 2663184aa7 (7 weeks ago), 2024-09-11 16:27:48 -0500
    • Engine revision 36335019a8
    • Dart version 3.5.3
    • DevTools version 2.37.3

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at C:\Users\Liam\AppData\Local\Android\sdk
    • Platform android-34, build-tools 33.0.1
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-10027231)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[X] Visual Studio - develop Windows apps
    X Visual Studio not installed; this is necessary to develop Windows apps.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components

[√] Android Studio (version 2022.3)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-10027231)

[√] VS Code (version 1.94.2)
    • VS Code at C:\Users\Liam\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.96.0

[√] Network resources
    • All expected network resources are available.

已尝试的无效方案 #

• 在App组件及各独立Widget中添加PopScope()
• 设置android:enableOnBackInvokedCallback="false"

解决方案 #

AutoRoute 9.x版本对路由栈处理逻辑做了调整，需通过TabsRouter拦截返回事件，而非直接使用PopScope，具体实现如下：

1. 在AutoTabsScaffold的bottomNavigationBuilder中，利用tabsRouter判断返回逻辑：

AutoTabsScaffold(
  routes: [B(), C(), D(), E(), F()],
  bottomNavigationBuilder: (_, tabsRouter) {
    return PopScope(
      canPop: false,
      onPopInvoked: (didPop) async {
        // 当前Tab栈有可返回页面时，执行Tab内返回
        if (tabsRouter.activeStack.canPop()) {
          tabsRouter.pop();
        } 
        // 当前不是初始Tab时，切换到首页Tab
        else if (tabsRouter.activeIndex != 0) {
          tabsRouter.setActiveIndex(0);
        } 
        // 所有条件满足后，再关闭应用
        else {
          SystemNavigator.pop();
        }
      },
      child: BottomNavigationBar(
        currentIndex: tabsRouter.activeIndex,
        onTap: (index) => tabsRouter.setActiveIndex(index),
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'B'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: 'C'),
          // 其他Tab项配置
        ],
      ),
    );
  },
);

2. 确保父路由A.page的子路由initial属性配置正确，且AutoTabsScaffold的routes与子路由完全匹配。

关键说明 #

AutoRoute 9.x适配了Flutter 3.x的PopScope逻辑，旧版本的返回拦截方式不再生效。必须通过TabsRouter管理Tab独立路由栈，先判断当前Tab是否有可返回页面、是否需要切换到初始Tab，再决定是否关闭应用。

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