Stream和StreamBuilder组件基本知识和操作

Stream与StreamBuilder组件基本知识与操作

介绍

Stream一般是水流的意思，在计算机术语里通常被翻译成数据流或事件流。介绍Stream的使用，如何用listen方法或用StreamBuilder组件监听、如何用StreamController创建一个Stream，以及广播broadcast与普通数据流的区别。最后也会简单介绍yield语法糖。

一、Stream是什么？

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

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

二、StreamBuilder的基本使用

AsyncSnapshot & stream

Map & where &distinct 自行百度

Stream的async* & yield 语法糖

和FutureBuilder的操作类似 ，传入stream，使用AsyncSnapshot中的ConnectionState来反映stream中的数据状态，再通过数据状态来更新对应的UI

代码如下（示例）：

final stream = Stream.periodic(Duration(seconds:1),(_)=>42);

child: StreamBuilder(
          stream: stream,
          builder: (BuildContext context , AsyncSnapshot<dynamic> snapshot){
            switch(snapshot.connectionState){
              
              case ConnectionState.none:
                // TODO: Handle this case.
                break;
              case ConnectionState.waiting:
                // TODO: Handle this case.
                break;
              case ConnectionState.active:
                // TODO: Handle this case.
                break;
              case ConnectionState.done:
                // TODO: Handle this case.
                break;
            }
          },
        ),

三、StreamController

sink

_StreamController中sink为_StreamSinkWrapper，_StreamSinkWrapper只是对_StreamController做一下包装

class _StreamSinkWrapper<T> implements StreamSink<T> {
  final StreamController _target;
  _StreamSinkWrapper(this._target);
  void add(T data) {
    _target.add(data);
  }

  void addError(Object error, [StackTrace? stackTrace]) {
    _target.addError(error, stackTrace);
  }

  Future close() => _target.close();

  Future addStream(Stream<T> source) => _target.addStream(source);

  Future get done => _target.done;
}

基本操作代码如下（示例）：

final controller = StreamController();
 child: Center(
          child: DefaultTextStyle(
            style: Theme.of(context).textTheme.headline4,
            child: Column(
              children: [
                RaisedButton(
                  child: Text("10"),
                    onPressed: () => controller.sink.add(10)
                ),
                RaisedButton(
                    child: Text("hi"),
                    onPressed: () => controller.sink.add("hi")
                ),
                RaisedButton(
                    child: Text("Error"),
                    onPressed: () => controller.sink.addError("ERROR")
                ),
                RaisedButton(
                    child: Text("Done"),
                    onPressed: () => controller.sink.close()
                ),
                StreamBuilder(
                  stream: controller.stream,
                  builder: (BuildContext context , AsyncSnapshot<dynamic> snapshot){
                    switch(snapshot.connectionState){

                      case ConnectionState.none:
                        // TODO: Handle this case.
                        return Text("NONE: 没有数据流");
                        break;
                      case ConnectionState.waiting:
                        // TODO: Handle this case.
                        return Text("NONE: 等待数据流");
                        break;
                      case ConnectionState.active:
                        // TODO: Handle this case.
                          if(snapshot.hasError){
                            return Text("ERROR ${snapshot.error}");
                          }else{
                            return Text("TRUE  ${snapshot.data}");
                          }
                        break;
                      case ConnectionState.done:
                        // TODO: Handle this case.
                        return Text("NONE: 数据流关闭");
                        break;
                    }
                  },
                ),
              ],
            ),
          ),
        ),

broadcast(广播）

广播可以做到多路stream监听 ，但是无法缓存数据
不使用广播 streamController会暂时储存数据

总结

鸿运当头

这篇好文章是转载于：学新通技术网