flutter Stream 入门程序

flutter Stream

介绍

本篇文章将会详细说明flutter中stream的基本使用

Flutter 中，整个 Stream 主要包含了 StreamController、Sink 、Stream 、StreamSubscription 四个对象，通过这四个对象来操控整个Stream的运行。

• StreamController

  有一个事件源叫 Stream，为了方便控制 Stream ，官方提供了使用 StreamController 作为管理；同时它对外提供了 StreamSink 对象作为事件输入口，可通过 sink 属性访问; 又提供 stream 属性提供 Stream 对象的监听和变换，最后得到的 StreamSubscription 可以管理事件的订阅。

  可以说， StreamController就是如其名字所示一样用来管理其他三个对象的对象。

• StreamSink

  sink英文的意思为水槽，我们可以将其理解为日常生活中的厨房的洗碗槽，洗碗槽(sink)中的水（data）会流进管子(stream)中。一般作为事件的入口，提供如 add ， addStream 等。

• StreamSubscription

  这是一个事件订阅后的对象，，Stream中有两种订阅模式，分别是单点订阅和广播。

  表面上用于管理订阅过等各类操作，如 cacenl 、pause ，同时在内部也是事件的中转关键。

• Stream

  事件源本身，一般可用于监听事件或者对事件进行转换，如 listen 、 where 。

开始一个demo

源码

创建一个stream

@override
void initState() {
  super.initState();
  //输出 创建stream log
  debugPrint('create stream');
  //通过Stream.fromFuture 构造一个字符串的流
  Stream _streamDemo = Stream.fromFuture(fetchData());
  //输出 开始监听
  debugPrint('start listening stream');
  //监听多个事件
  _streamSubscription = _streamDemo.listen(onData,onError:onError,onDone:onDone);
  debugPrint('Initialize completed.');
}

模拟异步的数据

Future<String> fetchData() async{
  await Future.delayed(Duration(seconds: 6));
  //throw 'something happened';
  return 'hello~';
}

添加监听事件的回调

void onData(String data){
  debugPrint('$data');
}

void onError(error){
  debugPrint('error:$error');
}

void onDone(){
  debugPrint('Done');
}

模拟界面

@override
Widget build(BuildContext context) {
  return Container(
    child: Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          FlatButton(
            child: Text('Pause'),
            onPressed: _pauseStream,
          ),
          FlatButton(
            child: Text('Resume'),
            onPressed: _resumeStream,
          ),
          FlatButton(
            child: Text('cancel'),
            onPressed: _cancelStream,
          ),
        ],
      ),
    ),
  );
}

暂停、恢复、取消监听stream的回调

_pauseStream(){
  debugPrint('pauseStream');
  _streamSubscription.pause();
}

_resumeStream(){
  debugPrint('resumeStream');
  _streamSubscription.resume();
}

_cancelStream(){
  debugPrint('cancelStream');
  _streamSubscription.cancel();
}

输出结果

当开始了程序之后 界面上会依次打印以下日志

2019-04-30 14:20:30.641 6011-6027/com.example.flutter_app I/flutter: create stream
2019-04-30 14:20:30.657 6011-6027/com.example.flutter_app I/flutter: start listening stream
2019-04-30 14:20:30.666 6011-6027/com.example.flutter_app I/flutter: Initialize completed.
2019-04-30 14:20:36.674 6011-6027/com.example.flutter_app I/flutter: hello~
2019-04-30 14:20:36.694 6011-6027/com.example.flutter_app I/flutter: Done

如果点按pause 会暂时取消监听，点按resume恢复监听，点按cancel取消监听，并且无法恢复

另一个Demo

源码

这次我们使用完整的流程来创建一个Stream

并且使用sink来存放stream中的输入的数据

代码逻辑与上一个demo如出一辙，只是需要注意 一些不同的地方：

StreamSubscription _streamSubscription;
StreamSink _streamSink;

这两个对象在上一个demo中并未出现

对应的，我们做出相应的修改

初始化

@override
void initState() {
  super.initState();
  
  print('Create a Stream');
  _streamDemo = StreamController.broadcast();
  _streamSink = _streamDemo.sink;

  print('start listen stream');
  _streamSubscription = _streamDemo.stream.listen(onData,onError: onError,onDone: onDone);

  _streamDemo.stream.listen(onData2,onError: onError,onDone: onDone);
  
  print('Initialize complete');
  
}

添加数据的方法

void _addDataToStream()async{
  print('_addDataToStream');
  String data = await fetchData();
  _streamSink.add(data);
}

Future fetchData() async{
  await Future.delayed(Duration(seconds: 2));
  //throw 'something happened';
  return 'hello~';
}

在界面上呈现Stream中的数据将其转换成视图

StreamBuilder(
  stream: _streamDemo.stream,
  builder: (context,snapshot){
    return Text('${snapshot.data}');
  },
),

同时我们可以改变其订阅的模式 改为broadcast

_streamDemo.stream.listen(onData2,onError: onError,onDone: onDone);
//添加新的回调函数
void onData2(String val){
    print('onData2:'+val);
  }

结果如下

2019-04-30 14:33:33.888 6011-6027/com.example.flutter_app I/flutter: Create a Stream
2019-04-30 14:33:33.890 6011-6027/com.example.flutter_app I/flutter: start listen stream
2019-04-30 14:33:33.897 6011-6027/com.example.flutter_app I/flutter: Initialize complete
2019-04-30 14:33:43.318 6011-6027/com.example.flutter_app I/flutter: _addDataToStream
2019-04-30 14:33:45.344 6011-6027/com.example.flutter_app I/flutter: onData:hello~
2019-04-30 14:33:45.345 6011-6027/com.example.flutter_app I/flutter: onData2:hello~