使用 GetX 在 flutter web 中导航多个页面后，浏览器的后退按钮被禁用

Question

我正在使用 GetX 构建 Flutter Web 应用程序进行状态管理和路由，但遇到了浏览器后退导航的问题。当我深度导航多个级别时（例如，从根页面向下 4-5 页），浏览器的后退按钮有时会跳过中间页面，并且并非所有页面都出现在浏览器历史记录堆栈中。

问题详情： 例如，我有以下页面：

• 首页 (/)
• 商店屏幕（/商店）
• 宠物详情屏幕 (/petDetail/:id)
• EditPostScreen (/editPost/:id)

    GetMaterialApp(
      initialRoute: '/',
      getPages: [
        GetPage(name: '/', page: () => HomePage()),
        GetPage(name: '/store', page: () => StoreScreen()),
        GetPage(name: '/PetDetailScreen/:docId', page: () => PetDetailScreen(docId: Get.parameters['docId']!)),
        GetPage(name: '/EditPostScreen/:docId', page: () => EditPostScreen( docId: Get.parameters['docId']!)),
      ],
    );

在我的应用程序中，我使用 Get.toNamed() 在页面之间导航，以确保每个导航都有唯一的 URL 并在浏览器历史记录中创建一个新条目。例如：

// Navigating to the pet detail page sample navigate 
Get.toNamed('/petDetail/${pet.docId}');

为了处理从 EditPostScreen 到 PetDetailScreen 的返回导航，我使用 WillPopScope：

    @override
    Widget build(BuildContext context) {
      return WillPopScope(
        onWillPop: () async {
          Get.offNamed('/petDetail/${widget.docId}');
          return false;
        },
        child: Scaffold(
          // Page content here...
        ),
      );
    }

问题： 当我从 HomePage 导航到 StoreScreen，然后从 StoreScreen 导航到 PetDetailScreen，最后从 PetDetailScreen 导航到 EditPostScreen 时，我希望能够使用浏览器的后退按钮以相反的顺序返回每个页面。但是，从 EditPostScreen 导航回 PetDetailScreen 后，浏览器后退按钮将被禁用且无法单击。 如何解决此问题以确保在浏览器的后台历史记录中一致地访问每个页面？

Answer 1

不要使用 Get.off 它会让你离开导航树，这就是浏览器后退导航按钮被禁用的原因删除所有 Get.Off 将它们替换为 Get.Back 并重试。