Code前端首页关于Code前端联系我们

Flutter BLoC 概念图及使用

terry 2年前 (2023-09-23) 阅读数 64 #移动小程序

在介绍 BLoC 之前,先介绍几个相关的类和概念:

前提条件概述

流类型

  1. 一个订阅
    1. 可以是一个订阅:多个订阅流:启用多订阅,订阅之前的消息不会收到视频。

      使用StreamController

      下图显示了整个StreamController的操作,它监视并接受此数据流作为数据的一部分。Flutter BLoC原理图解及使用

      RxDart

      用于使用可观察序列编写异步和基于事件的程序。具体文档链接:RxDart

      StreamController改进版:

      1. PublishSubject:普通广播流控制器,可重复监听as SBehavichronous(默认):缓存最近事件的广播流控制器 重播主题:广播流控制器缓存多个数据,可设置上限

      每个xxSubject可以视为一个单元(以备后用): :Observable对象,扩展流,合并Streams和StreamTransformers(默认单个订阅)

      InheritedWidget

      InheritedWidget 的工作原理如下:Flutter BLoC原理图解及使用

      Fact>Fact>Contexty.OfitromgetWContexty.OfitromgetWidget。 pe(T) ; final t = T.of(context)

      如何使用上面的内容?在子组件中:

      Root root = Root.of(context);//获取Root对象
      root.data... // 使用root对象的变量等
      复制代码

      让我们进入正题:

      状态管理:BloC:Bbusiness business Flutter BLoC原理图解及使用

      ompon ent(业务逻辑组件)

      BLoC 是典型的观察者模式

      Flutter 实现了这种设计模式,必须使用:

      1. BlocProvider 组件:InheritedWidget 继承组件 + Bloc 对象 ❀ (SubjectBlocrt) )

      BlocProvider

      Flutter BLoC原理图解及使用

      BLoC 类其众多用途和适当的使用场景

      1。 type:最基本的初始化和使用
      Flutter BLoC原理图解及使用Flutter BLoC原理图解及使用

      下图是对应的❙ty❙转换为状态方法:Flutter BLoC原理图解及使用

      Event->State(状态转换图)Flutter BLoC原理图解及使用

      简述:这种转换的原理是我们通过公共广播 PublishSubject 发送事件到达中间监听处理器:eventHandler。功能基础 异步处理接收到的事件。处理完成后,有一些返回适当的状态。将所有返回的结果添加到生成的BehaviorSubject 中。由于BehaviorSubject的特性,会传递并保留最新的结果。用户界面监视相应的状态,然后提供各种界面响应。

      一个小例子:加载数据的一般场景Flutter BLoC原理图解及使用

      以下是手写块中的部分代码,仅供逻辑参考:

        Stream<AbstractState> eventHandler(AbstractEvent event) async* {
            if (event is InitEvent) {
                yield LoadingState();
                final remoteData = await Request.fetchData();
                yield ResultData(remoteData);
            } else if (event is RefreshState) {
                final remoteData = await Request.fetchData();
                yield UpdateData(remoteData);
            }
        }
      复制代码
      3。类型:注册、登录 Mixin 块类中添加了两个函数。根据输入流,正确验证电子邮件和密码满足要求
      4。 type:购物清单实现
      Flutter BLoC原理图解及使用

      上图展示了购物车侧的一个方块以及购物车。产品元素块由产品元素的 + 号组成,事件流向 pageBloc。监控pageBloc变化的红点数据也会随之变化。同时监控页面块的itemBloc是否在购物车中。返回适当的布尔值以确定购物车是否已更新。相应元素的状态变为+号。

      具体代码链接:ShopItemBloc


      文章结束:以上四种对应场景是从国外专家的一篇文章中总结出来的。文章比较长,读起来可能会很累。如果你结合我的总结来阅读,我想应该很容易理解。

      作者:yk3372
      链接:https://juejin.im/post/5d6e1a086fb9a06aec265a28
      来源:掘金版权所有。商业转载请联系作者获得许可。非商业转载请注明来源。

版权声明

本文仅代表作者观点,不代表Code前端网立场。
本文系作者Code前端网发表,如需转载,请注明页面地址。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

热门