StreamBuilder 用法示例

streambuilder 用法示例

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

基本上它有两个参数。

A Stream,
A Builder,
Flutter 中的流是什么？
根据官方文档Stream将有如下定义

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

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

有两种流：

单一订阅：该流最多可以有一个侦听器。
广播：该流的侦听器数量可能是无限的。
Flutter 中的 Builder 是什么？
Builder 基本上用于将数据流转换为Widget。

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

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更新当前摘要。

import 'dart:async';import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget 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>();@overrideinitState() {super.initState();_events.add(0);}void _incrementCounter() {_counter++;_events.add(_counter);}@overrideWidget 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,),));}
}