MaterialApp.router 构造函数在重建时显示空白屏幕

Question

每当MaterialApp.router(...)通过代码甚至热重载重建时，它都只显示空白屏幕。我使用自动路由包来处理导航，并按照他们的设置步骤进行操作，最终得到以下代码

class MyApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    ...
    final _appRouter = AppRouter();
    return MaterialApp.router(
      ...
      routerDelegate: _appRouter.delegate(),
      routeInformationParser: _appRouter.defaultRouteParser(),
      builder: (context, router) => router!,
    );
  }

使用这段代码，我得到了空白屏幕，但是每当我更改为

class MyApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    return MaterialApp(
      ...
      home: HomeScreen(),
      ...
    );
  }
}

又可以正常工作了。我有什么遗漏的吗？

Answer 1

发生这种情况是因为您在构建函数中声明了 AppRouter，它会在每次构建时创建一个全新的路由器，只需将其删除并将其声明为小部件变量即可。它看起来像这样：

class MyApp extends ConsumerWidget {
  final _appRouter = AppRouter();
  
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    ...
    return MaterialApp.router(
      ...
      routerDelegate: _appRouter.delegate(),
      routeInformationParser: _appRouter.defaultRouteParser(),
      builder: (context, router) => router!,
    );
  }
}