Flutter响应式编程 - Stream

1.前言

在Dart库中,有两种实现异步编程的方式(FutureStream),使用它们只需要在代码中引入dart:async即可。
本文主要介绍Stream的相关概念及利用其异步特性来实现简单的响应式编程。

2.什么是Stream?

为了将Stream的概念可视化与简单化,可以将它想成是管道(pipe)的两端,它只允许从一端插入数据并通过管道从另外一端流出数据。
在Flutter中,

  • 我们将这样的管道称作Stream
  • 为了控制Stream,我们通常可以使用StreamController来进行管理;
  • 为了向Stream中插入数据,StreamController提供了类型为StreamSink的属性sink作为入口;
  • StreamController提供stream属性作为数据的出口。

通常在本文范围内我们会使用StreamController来管理Stream,后续文章在引入rxdart这个库之后会更多的使用Subject。

3.Stream可以传输什么?

任何东西都可以!包括简单的值,事件,对象,集合,map,error或者其他的Stream,任何类型的数据都可以使用Stream来传输。

4.如何感知Stream中传输的数据?

当你需要使用Stream中传输的数据时,可以简单地使用listen函数来监听StreamController的stream属性。
在定义完listener(监听者)之后,我们会收到StreamSubscription(订阅)对象,通过这个订阅对象我们就可以接收到Stream发送数据变更的通知。
只要至少有一个活跃的监听者,Stream会创建以下事件来通知订阅对象:

  • 数据从Stream中流出;
  • Stream接收到错误信息;
  • Stream关闭。

同时,你也可以通过订阅对象来:

  • 停止监听;
  • 暂停监听;
  • 恢复监听。

5.Stream是单纯的管道?

肯定不是!Stream均可以在数据流入之前和流出之前对数据进行处理。
我们可以使用StreamTransformer来处理Stream中的数据,它具有以下特点:

  • 它是Stream中能够捕获数据流的一系列函数;
  • 可以对Stream中的数据进行处理加工;
  • 经过处理的Stream依然是Stream(链式编码的前提)。

StreamTransformer可以用于以下场景(包括但不仅限于):

  • 过滤:过滤基于条件的任何类型数据;
  • 修改:对任何类型数据进行修改;
  • 重新分组:对数据进行重新分组;
  • 向其他Stream注入数据;
  • 缓存
  • 其他基于数据的行为和操作;
  • ...

6.Stream的类型

有两种类型的Stream。

单点订阅(单播)Stream

该类型的Stream在其整个生命周期中只有一个监听者。

如果订阅已经被取消,就不能再次监听这个Stream。

多点订阅(广播)Stream

对比前者,该类型的Stream不限制监听者的数量。

我们可以在广播Stream的任何周期添加监听者,新的监听者会在监听的同时收到相应的订阅。

7.如何使用Stream流出数据构建Widget?

Flutter提供了名为StreamBuilder的类,它监听Stream,并且在Stream数据流出时会自动重新构建widget,通过其builder进行回调。
以下是示例代码:

StreamBuilder<T>(key: <#该组件的唯一ID,可选#>, stream: <#被监听的Stream#>, initialData: <#初始数据,可选#>, builder:(BuildContext context, AsyncSnapshot<T> snapshot) {
 return <#实际的widget构造代码#>;
})

为了下文更加清楚地了解该模式的执行过程,我们着手编写一个demo。安装完Flutter开发环境后,我们使用命令创建一个新的Flutter工程项目stream_demo

$ flutter create stream_demo

完成之后打开工程,在main.dart中模板自动为我们生成了一个计数器的程序,它实现了点击右下角浮动按钮完成数字累加的功能。在下文我们将一起改造它,运行后显示效果如下:

stream_demo - 1

stream_demo - 2

8.什么是响应式编程?

简单说来,响应式编程是使用异步数据流的编程思想。

任何从事件(如点击),值的改变,消息,...创建请求,任何可能改变的数据都可以被Stream传递和触发。

使用了响应式编程编写的应用,它具有以下特征:

  1. 异步性;
  2. 由Stream和listener组成主要架构;
  3. 当应用中某处(事件,数值改变...)发生时,Stream会收到这些变化的通知;
  4. 如果某个监听者监听到Stream的订阅时,它会做出相应的处理,不管在应用的何处;
  5. 组件之间弱耦合。

举例来说,如果Widget向Stream传递数据,Widget本身并不关心:

  1. 传递后会发生的后续情况;
  2. 何处会使用该数据;
  3. 数据的使用者是谁;
  4. 数据会被如何使用...

Widget只关心自己的业务逻辑!如此一来,看似应用变得无状态,但它会让应用程序具有以下优点:

  1. 应用中模块职责单一;
  2. 易于模拟数据以方便测试;
  3. 方便组件重用;
  4. 应用易于重构...

9.BLoc设计模式

BLoc(Business Logic Component)这一设计模式最先在2018年的DartConf提出,它由以下几个概念组成:

  1. 业务逻辑由一个或多个blocs组成;
  2. 业务逻辑应该尽量从展示层剥离开来,UI只关心UI层面的问题;
  3. 使用Stream的高级特性,sink作为输入,stream作为输出;
  4. 保持平台独立性;
  5. 保持环境独立性。

事实上,BLoc最初构想是独立于各个平台间(web,移动端,后端)的代码最大复用。
我们来看看官方有关这一模式的术语:

BLoc Pattern
  • Widget通过sink向BLoc发送事件;
  • Widget通过stream接收BLoc发送事件;
  • 业务逻辑由BLoc处理,Widget并不关心。

使用该模式后,得益于业务逻辑从UI上的解耦,我们可以:

  1. 任何时候都可以改变业务逻辑,并只会对应用造成轻微影响;
  2. 改变UI时并不会对业务逻辑造成干扰;
  3. 使得业务逻辑易于测试。

10.将BLoc运用到计数器程序

首先这里声明一下,该模式在这里使用难免会有杀鸡用牛刀之嫌。
撸码开始!

main.dart

这里我们可以将_MyHomePageState中处理counter自增的逻辑拆分到CounterBloc中,

bloc_base.dart

counter_bloc.dart

main.dart

拆分后_MyHomePageState中只需要对stream进行监听即可。

示例代码:stream_with_bloc

11.扩展一下

观察上述改造后的代码,bloc由page管理。但在实际开发当中,一个页面不只有一个bloc,可能有数据处理bloc,事件处理bloc等。
由此使用一个工具类来管理这些业务逻辑组件显得尤为必要,我们定义个BlocProvider,结构如下:

bloc_provider.dart

该工具类将Page/Widget对于bloc的管理变得简单,使用前我们只需要将页面和blocs相关联,然后调用以下代码即可:

final _blocs = BlocProvider.of<SomeBloc>(context);

附上最终版代码片段:

main.dart - 01

main.dart - 02

示例代码:stream_with_bloc_provider

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,294评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,493评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,790评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,595评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,718评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,906评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,053评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,797评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,250评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,388评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,018评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2 350

推荐阅读更多精彩内容