美文网首页Flutter
最简单rxdart,bloc

最简单rxdart,bloc

作者: aibinMr | 来源:发表于2019-04-11 12:03 被阅读114次

    这是一篇个人理解的文章,如果存在错误请大家指正,本篇幅不介绍原理 只介绍过程(用一位博客朋友的代码做示例)

    1 rxdart和bloc要解决的问题是什么(现在我都不明白bloc是什么)

    rxdart和bloc用来处理跳转页互传数据,数据透传

    2 如何透传

    很多网络文章介绍了很多概念,概念原理太枯燥了,说白了,透传的数据是通过BuildContext透传过去的,把数据绑定在BuildContext上面,子组件会继承BuildContext,那么子组件会得到绑定数据,目标页通过上层页面跳转的时候把BuildContext带入 那么目标页也自然会有上一页的BuildContext,自然会有绑定的数据

    3 如何实现

    class BlocProvider extends InheritedWidget{

            final CountBLoC bLoC=CountBLoC();

            BlocProvider({Keykey,Widget child}):super(key:key, child:child);

            @override

            boolupdateShouldNotify(_)=>true;

            static CountBLoC of(BuildContext context)=>

            (context.inheritFromWidgetOfExactType(BlocProvider) as BlocProvider).bLoC;

    }

    这页就是A页具体实现的过程 bloc 就是我们保持数据,处理数据的对象,child就是具体的ui组件,由于ui组件默认会继承父组件的BuildContext,所以子组件也和bloc实现了绑定,二子组件在跳转的时候使用的是这串语句

    Navigator.of(context).push(MaterialPageRoute(builder: (context) => UnderPage())))

    完整代码

    好,我不管这串语句具体是什么意思,但是我看到有context做参数传递,那我就明白了,这个时候带有bloc 的context已经被传递到第二个页面,那现在的问题是如何在组件中获取bloc,

    那么如何在子页获取bloc呢

    final bloc = BlocProvider.of(context);

    获取bloc监听,或者获取句柄

    stream: bloc.stream,

    监听结果,获取监听结果句柄

    AsyncSnapshot<int> snapshot

    使用就不过多介绍了

    ${snapshot.data}

    这其中少了如何对数据进行逻辑处理,那就先把bLoC代码贴出来

    其实在获取bloc后,直接执行即可

    bloc.increment(),

    而bloc.increment(),就是一段业务处理过程,这篇文章还有两个需要注意的,1是BlocProvider父组件使用的是InheritedWidget,第二个就是bloc中的dispose方法,这个可能在做资源回收,我是不太想深究了,

    好,这篇文章就到这里,这篇文章并不是讲redart和bloc的具体原理和概念,就是讲了一下我自己理解的数据传递过程,新手可能会问rxdart在哪,BehaviorSubject这个类就是rxdart具体的封装吧,就在Bloc代码中。想在想rxdart是什么我觉得就是一个可控的双向绑定,

    这个是我复制到自己github下的地址,这个地址不在更新

    我clone代码的原地址github原地址,为大家能找到代码提供者最新代码使用

    相关文章

      网友评论

        本文标题:最简单rxdart,bloc

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