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

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

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

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

自动路由版本： 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 传递给它，并将其保存在 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