StreamBuilder 用法示例

streambuilder 用法示例

Flutter 中的 StreamBuilder Widget 是什么？

StreamBuilder Widget是一个响应数据异步处理的StatefulWidget 。换句话说，我们可以说它能够保留"运行摘要"和/或记录并记录数据流中的"最新数据项"。

基本上它有两个参数。

A Stream,

A Builder,

Flutter 中的流是什么？

根据官方文档Stream将有如下定义

" Stream提供了一种接收事件序列的方法。每个事件要么是数据事件（也称为流的元素），要么是错误事件（这是某件事情失败的通知）。当流发出其所有事件时，单个"完成"事件将通知侦听器已到达末尾"

简而言之，我们可以说Stream就像一个管道，用户可以在其中一端输入一个值，而在另一端监听器，监听器将接收该值。Steam 还可以有多个侦听器，并且当您将其放入管道时，所有侦听器可以具有相同的值。

有两种流：

单一订阅：该流最多可以有一个侦听器。

广播：该流的侦听器数量可能是无限的。

Flutter 中的 Builder 是什么？

Builder 基本上用于将数据流转换为Widget。

StreamBuilder Widget的默认构造函数如下所示：

dart 复制代码

StreamBuilder({
  Key key, 
  T initialData,
  Stream<T> stream, 
  @required AsyncWidgetBuilder<T> builder
 });

在上面的构造函数中，所有带有@required标记的字段都不能为空。现在让我们详细了解每个属性。

特性：

Key key：此属性键控制一个小部件如何替换树中的另一个小部件。

T initialData：该属性是将用于创建初始快照的数据。提供此值（大概是在创建流时以某种方式同步获取的）可确保第一帧将显示有用的数据。否则，无论流上是否有可用值，都将使用 null 值构建第一帧：由于流是异步的，因此在初始构建之前无法从流中获取任何事件。

AsyncWidgetBuilder builder：此属性指定此构建器当前使用的构建策略。它应该始终返回小部件，并且不应该有任何副作用，因为它将被多次调用。

Stream Stream：此构建器当前连接的异步计算，可能为 null。更改后，如果前一个流不为空，则使用afterDisconnected 更新当前摘要，如果新流不为空，则使用afterConnected更新当前摘要。

dart 复制代码

import 'dart:async';

import 'package:flutter/material.dart';



void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: StreamBuilderWidget(),
      ),
    );
  }

}



class StreamBuilderWidget extends StatefulWidget {

  @override
  _StreamBuilderWidgetState createState() => _StreamBuilderWidgetState();
}

class _StreamBuilderWidgetState extends State<StreamBuilderWidget> {
  int _counter = 0;
  final StreamController<int> _events =StreamController<int>();

  @override
  initState() {
    super.initState();
    _events.add(0);
  }

  void _incrementCounter() {
    _counter++;
    _events.add(_counter);
  }
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
        body:Center(
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Text(
                'You have pushed the button this many times:',
              ),
              StreamBuilder(
                stream: _events.stream,
                builder: (BuildContext context, snapshot) {
                  return new Text(
                    snapshot.data.toString()
                  );
                },
              ),
            ],
          ),
        ),
        floatingActionButton: new FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: new Icon(Icons.add,),
        )

    );
  }
}

参考：

https://flutteragency.com/streambuilder-widget/