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

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

对于嵌套路由（当您为路由提供子级时），您可以使用包装器。您可以将您的 bloc provider 包裹在 child 周围，它将向所有 child 屏幕提供 bloc。

/// 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...

Answer 2

我们的页面小部件（state/less/ful）实现了 AutoRouteWrapper

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

}

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

2 个答案: