美文网首页
[flutter] bloc 中进行路由跳转

[flutter] bloc 中进行路由跳转

作者: w_w_wei | 来源:发表于2021-02-05 09:59 被阅读0次

无 BuildContext 路由

我们使用 navigatorState在没有 BuildContext 的情况下进行路由

在 NavigatorBloc 构造函数中, 接受一个 包含 navigator state 的 Global key 作为参数, 这个Bloc 应该只接受页面直接的navigate 事件。

class NavigatorBloc extends Bloc<NavigatorAction, dynamic>{
  
  final GlobalKey<NavigatorState> navigatorKey;
  NavigatorBloc({this.navigatorKey});

  @override
  dynamic get initialState => 0;

  @override
  Stream<dynamic> mapEventToState(NavigatorAction event) async* {
    if(event is NavigatorActionPop){
      navigatorKey.currentState.pop();
      
    }else if(event is NavigateToHomeEvent){
      navigatorKey.currentState.pushNamed('/home');
      
    }
  }
}

创建一个用于存储 navigator state的global key,然后将其传递给MaterialApp。另外,我们应该将此属性传递给NavigatorBloc。

class _MyAppState extends State<MyApp> {

  final GlobalKey<NavigatorState> _navigatorKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return BlocProvider<NavigatorBloc>(
      bloc: NavigatorBloc(navigatorKey: _navigatorKey),
      child: MaterialApp(
        navigatorKey: _navigatorKey,
        title: 'My App',
        home: HomePage(),
      ),
    );
  }
}

对于每个导航,您只需创建一个事件即可导航到每个特定页面。现在,我们可以从任何BLoC导航到任意页面。

Tip:使用BlocProvider.of <NavigatorBloc>(context).dispatch(NavigateToHomeEvent());在任何小部件中使用 navigator BLoc 导航到另一个页面。这样,您将拥有一个集中的navigation class.

相关文章

  • [flutter] bloc 中进行路由跳转

    无 BuildContext 路由 我们使用 navigatorState在没有 BuildContext 的情况...

  • Flutter 路由

    flutter 路由 页面跳转 在flutter中界面就是组件Flutter 中的路由通俗的讲就是页面跳转。在 F...

  • Flutter 15 - Navigator (路由)组件详解1

    一、Flutter 中的路由 Flutter 中的路由通俗的讲就是页面跳转。在 Flutter 中通过 Navig...

  • Flutter(十三):路由

    1 Flutter 中的路由 Flutter 中的路由通俗的讲就是页面跳转。在 Flutter 中通过 Navig...

  • 路由跳转方式

    路由跳转方式 UI component主要是利用history属性。在effects中进行路由跳转,主要利用 re...

  • Flutter 中的路由

    .路由定义 Flutter 中的路由通俗的讲就是页面跳转。在 Flutter 中通过 Navigator 组件管理...

  • Flutter - 页面跳转(路由)、传值

    Flutter 中页面跳转通过 Navigator 和 Route 来实现。 一、页面跳转 1,常规路由页面跳转...

  • Day13 - Flutter - 路由导航

    概述 路由管理 路由基本使用 命名路由使用(重点) 页面跳转的拓展 一、路由管理 1.1、认识Flutter路由路...

  • Flutter中的路由使用

    Flutter中提供了两种配置路由跳转的方式:1、基本路由;2、命名路由 一、基本路由 1.引入将要跳转的页面 2...

  • flutter-Could not find a generat

    最近在研究flutter这个东西,在做路由跳转的时候遇到点小小的问题,动态路由跳转没有任何问题,今天配置好的路由怎...

网友评论

      本文标题:[flutter] bloc 中进行路由跳转

      本文链接:https://www.haomeiwen.com/subject/dcswtltx.html