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中模板自动为我们生成了一个计数器的程序,它实现了点击右下角浮动按钮完成数字累加的功能。在下文我们将一起改造它,运行后显示效果如下:

1891992-e24d386732c6bab0.png
stream_demo - 1

1891992-213486fbc5baacb3.png
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,移动端,后端)的代码最大复用。
我们来看看官方有关这一模式的术语:

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

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

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

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

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

1891992-184bc45a74b27be0.png
main.dart

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

1891992-f14c6b035b60aaf2.png
bloc_base.dart

1891992-d15d7a5330d20b14.png
counter_bloc.dart

1891992-51fdb120b1a58637.png
main.dart

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

示例代码:stream_with_bloc

11.扩展一下

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

1891992-3ab0fa5a0e3de239.png
bloc_provider.dart

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

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

附上最终版代码片段:

1891992-988dcfbea1013d00.png
main.dart - 01

1891992-2fefc4dd289261b5.png
main.dart - 02

示例代码:stream_with_bloc_provider

猜你喜欢

转载自blog.csdn.net/weixin_34018169/article/details/87017785