flutter - 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(),
      ...
    );
  }
}

它再次正常工作。有什么我想念的吗？

标签： flutter

Answer 1

发生这种情况是因为您在 build 函数中声明 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!,
    );
  }
}