Flutter PopScope在Android设备返回键点击时失效问题解决

问题场景 #

• 点击Android设备返回键时，Detail页面未返回上一页，而是直接退出整个应用
• 已在Detail页面配置PopScope(canPop: true, ...)，但无效
• 原导航实现：MainPage通过IndexedStack嵌套多个Navigator，跳转Detail页使用Navigator.push

问题原因 #

原方案中IndexedStack嵌套的Navigator属于局部导航栈，系统返回键默认监听全局导航栈，导致局部栈的页面无法被系统返回键识别，触发了应用退出逻辑。

解决配置 #

1. 调整主页结构：将main.dart的主页设置为BottomBar组件，统一使用全局导航栈管理页面
2. 配置全局路由生成器：在MaterialApp中添加onGenerateRoute，统一处理路由跳转
3. 定义页面路由名称：为HomeScreen和PropertyDetailsScreen设置静态routeName属性
4. 使用命名路由跳转：替换Navigator.push为Navigator.pushNamed进行页面跳转

代码示例 #

1. 定义页面路由名称

class HomeScreen extends StatelessWidget {
  static const routeName = '/home';
  // ... 页面实现
}

class PropertyDetailsScreen extends StatelessWidget {
  static const routeName = '/property-details';
  // ... 页面实现
}

2. 配置全局路由生成器

MaterialApp(
  home: const BottomBar(),
  onGenerateRoute: (settings) {
    switch (settings.name) {
      case HomeScreen.routeName:
        return MaterialPageRoute(builder: (_) => const HomeScreen());
      case PropertyDetailsScreen.routeName:
        return MaterialPageRoute(builder: (_) => const PropertyDetailsScreen());
      default:
        return MaterialPageRoute(builder: (_) => const HomeScreen());
    }
  },
)

3. 命名路由跳转

// 从HomeScreen跳转至PropertyDetailsScreen
Navigator.pushNamed(context, PropertyDetailsScreen.routeName);

效果验证 #

完成上述配置后，点击Android返回键时，会正确从Detail页面返回至HomeScreen，而非退出应用。

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