如何使用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.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

Answer 1

在结合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

Answer 2

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