颤振自动路由 | 如何使用 BlocProvider 包装路由？

Question

因此，我使用auto_route包在我的应用程序中进行导航和flutter_bloc状态管理。当我使用旧的 Navigator 时，我可以用 BlocProvider 包装一条路线。例如：

class Router {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case '/':
        return MaterialPageRoute(
          builder: (_) => BlocProvider( // wrapped Home with BlocProvider
            create: (context) => SubjectBloc(),
            child: Home(),
          ),
        );
      case '/feed':
        return MaterialPageRoute(builder: (_) => Feed());
    }
  }
}

现在，auto_route使用注释来生成路由文件。我将如何绕过为路线提供提供者上下文？

Answer 1

我们已经实现了页面小部件（状态/较少/完整）AutoRouteWrapper

class HomePage extends StatelessWidget implements AutoRouteWrapper{
  .....
 @override
 Widget wrappedRoute(context){
   return BlocProvider(
            create: (context) => HomeBloc(),
            child:  this, // this as the child Important!
          );
   }

}

Answer 2

答案取决于您的路线是如何构建的，我将向您展示如何实现这一目标。

对于嵌套路由（当您为路由提供子路由时），您可以使用包装器。您可以将块提供程序包裹在子屏幕上，它将向所有子屏幕提供块。

/// routes

AutoRoute(
    page: SupportWrapper,
    name: 'SupportRouter',
    path: 'support',
    children: [
        AutoRoute(
            page: HelpSupportScreen,
            path: '',
        ),
        AutoRoute(
            page: MessageUsScreen,
            path: 'issue',
        ),
    ],
),

/// build method of [support_wrapper.dart]

@override
Widget build(BuildContext context) {
  return MultiBlocProvider(
    providers: [
      BlocProvider(
        create: (context) => _supportCubit,
      ),
    ],
    child: const AutoRouter(),
  );
}

如果您不使用包装器小部件，例如它是没有子路由的单个屏幕，我将创建一个单独的小部件来包裹屏幕BlocProvider。

class SupportScreen extends StatelessWidget {
  const SupportScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => _supportCubit
      child: const _SupportScreen(),
    );
  }
}

class _SupportScreen extends StatelessWidget {
  const _SupportScreen({Key? key}) : super(key: key);

// rest of your screens code...