如何使用 Getx 和自动路由设置导航器？

Question

问题： 我在使用 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(),
      routeInformationParser: _appRouter.defaultRouteParser(),
      builder: (context, extendedNav) => Theme(
          data: ComplexReduxTheme.complexReduxLightTheme,
          child: extendedNav ?? Container(color: Colors.red),
         ),
      );
    }
  }

我正在使用 GetMaterialApp.router，其中 returns 是一个 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

Answer 1

您不需要外部路由插件，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 不知道插件使用哪个上下文，因为它在其生命周期之外。

Answer 2

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

我创建了初始绑定并将 appRouter 传递给它，并将其保存在我用于 Get.toNamed 之类方法的 getx 路由控制器中，因为对于初始 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

如何使用 Getx 和自动路由设置导航器？

How do I set up navigator using Getx and Auto Route?

flutter

flutter-getx