如何使用 Getx 和 Auto Route 设置导航器？

如何解决如何使用 Getx 和 Auto Route 设置导航器？

问题： 我在使用 GetX 和 AutoRoute 设置导航时遇到问题。

代码设置： 根据 GetX 文档，如果您想使用 GetX 导航，则必须将 MaterialApp() 替换为 GetMaterialApp()。您还可以设置路线。

void main() {
  runApp(
    GetMaterialApp(
      initialRoute: '/',getPages: [
        GetPage(name: '/',page: () => MyHomePage()),GetPage(name: '/second',page: () => Second()),GetPage(
          name: '/third',page: () => Third(),transition: Transition.zoom  
        ),],)
  );
}

AutoRoute 示例使用 MaterialApp.router() 设置 routerDelegate 和 routeInformationParser。

   final _appRouter = AppRouter()  
   ...  
  Widget build(BuildContext context){  
      return MaterialApp.router(  
             routerDelegate: _appRouter.delegate(...initialConfig),routeInformationParser: _appRouter.defaultRouteParser(),),} 

以下是我根据 Getx 和 AutoRoute 设置导航的方法：

void main() {
 configureDependencies();
 runApp(Portfolio());
}

class Portfolio extends StatelessWidget {
  final _appRouter = AppRouter.Router();
  @override
  Widget build(BuildContext context) {
  return GetMaterialApp.router(
      routerDelegate: _appRouter.delegate(),builder: (context,extendedNav) => Theme(
          data: ComplexReduxTheme.complexReduxLightTheme,child: extendedNav ?? Container(color: Colors.red),);
    }
  } 

我正在使用 GetMaterialApp.router，它返回一个 GetMaterialApp。尽管如此，我还是收到错误消息“您正在尝试在没有 GetMaterialApp 或 Get.key 的情况下使用无上下文导航。”。我尝试设置导航键并设置 Get.testMode = true 但当我尝试导航到另一个屏幕时没有任何反应（没有错误）。

预期结果： 我应该能够通过 Get.toNamed() 导航到所需的屏幕。

当前结果： 尝试使用 Get.toNamed() 导航到另一个屏幕时，我从 GetX 收到以下错误：“您正在尝试使用无上下文导航 一个 GetMaterialApp 或 Get.key。 如果您正在测试您的应用程序，您可以使用： [Get.testMode = true]，或者如果您正在运行您的应用程序 物理设备或模拟器，您必须交换您的 [MaterialApp] 对于 [GetMaterialApp]。”

AutoRoute 版本： 2.2.0

获取版本： 4.1.4

解决方法

您不需要外部路由插件，GetX 已经为您完成了，如果您想导航，只需使用 Get.toNamed("/some-page")，它就会显示您想要的页面。嵌套路由也是如此。

例如

GetPage(
  name: '/third',page: () => Third(),transition: Transition.zoom,children: [
    GetPage(
      name: '/child-of-third',page: () => ChildOfThird(),),],// You access it like this
Get.toNamed("/third");

// And this one,for the nested page
Get.toNamed("/third/child-of-third");

出现错误的原因是当您在 GetX 中使用外部路由插件时，它会生成自己的代码，在自己的生态系统中有自己的上下文。 GetX 不知道插件使用哪个上下文，因为它超出了它的生命周期。

,

在我的情况下，将 getx 和自动路由器结合使用时，我遇到了同样的问题，我也需要嵌套导航，我创建了一个像这样的解决方法

我创建了初始绑定并将 appRouter 传递给它并将其保存在 getx 路由控制器中，我正在使用该方法使用 Get.toNamed 之类的方法，因为使用初始 appRouter，您不需要上下文，您可以像这样导航

// main app widget
class _myAppState extends State<MyApp> {
    
    final _appRouter = AppRouter();
    @override
    Widget build(BuildContext context) {
       return GetMaterialApp.router(
          routerDelegate: _appRouter.delegate(),routeInformationParser: _appRouter.defaultRouteParser(),initialBinding: InitialBinding(router: _appRouter,);
    }
}

// initial binding to store to store app router
class InitialBinding extends Bindings {
    AppRouter router;
    InitialBinding({required this.router,});
    @override
    void dependencies() {
       Get.put(NavRoutesController(router: router,permanent: true);
    }
}

// router controller

class NavRoutesController extends GetxController {
   AppRouter router;
   NavRoutesController({required this.router,});
   

   void toNamed(String route){
      router.pushNamed(route);
   }

}

//to navigate use

final router = Get.find<RouterController>();
router.toNamed("/some")
//or

Get.find<RouterController>().toNamed("/some")
// you can get base context as well from AppRouter like this
Get.find<RouterController>().router.navigatorKey.currentState.context