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

【问题标题】：Flutter auto_route | How do I wrap a route with BlocProvider?颤振自动路由 |如何使用 BlocProvider 包装路由？
【发布时间】：2021-08-30 09:49:47
【问题描述】：

所以，我在我的应用程序中使用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 使用注解生成路由文件。我将如何四处为路由提供提供者上下文？

【问题讨论】：

标签： flutter bloc flutter-provider

【解决方案1】：

我们希望在路由器部分而不是在页面本身中处理这个问题。在页面中，我们可以简单地使用 bloc provider。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

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

对于嵌套路由（当您为路由提供子路由时），您可以使用包装器。您可以将您的 bloc 提供者包裹在孩子周围，它将为所有子屏幕提供 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...

【讨论】：

我尝试过的东西很有效！库的开发者建议我应该实现AutoRouteWrapper。
太棒了！如果你觉得我的回答有帮助，别忘了点赞? 或者如果它回答了你的问题，就把它标记为已回答

【解决方案3】：

我们的页面小部件（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!
          );
   }

}

【讨论】：