Flutter StreamBuilder 异步更新数据

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。

Flutter是谷歌推出的最新的移动开发框架。

【x1】微信公众号的每日提醒随时随记每日积累随心而过

【x2】各种系列的视频教程免费开源关注你不会迷路

【x3】系列文章百万 Demo 随时复制粘贴使用

在 Flutter 中可用于异步通信的方案有如下：

Provider （ Provider 异步通信、Provider状态管理）
ValueNotifier 点击查看详情
Stream: StreamController的使用详情 | StreamBuilder组件的结合使用 | StreamBuilder 实现的倒计时进度圆圈
EventBus (不考虑使用)
Bloc BLoC 异步通信、BlocBuilder的基本使用、BlocProvider的初探

本文章讲解 StreamBuilder 的基本使用，以及通过 StreamBuilder实现的计时器的Demo功能

本文章最终实现的效果如下：

1 计时器实现

在 Flutter 中，StreamBuilder 是一个将 Stream 流与 Widget结合到一起的，可实现局部数据更新的一个组件，基本使用如下代码清单1-1所示：

 ///代码清单1-1/// 监听Stream，每次值改变的时候，更新Text中的内容StreamBuilder<String> buildStreamBuilder() {return StreamBuilder<String>(///绑定streamstream: _streamController.stream,///默认的数据initialData: "00:00:00",///构建绑定数据的UIbuilder: (BuildContext context, AsyncSnapshot<String> snapshot) {///snapshot.data 就是传递的数据对象return Text('当前时间  ${snapshot.data} ',style: TextStyle(fontSize: 22, color: Colors.blue),);},);}

StreamBuilder 需要绑定一个 Stream ，在Flutter中我们一般通过 StreamController 来进行流的操作，所以这里也创建了一个 StreamController。

///使用单订阅流即可StreamController<String> _streamController = StreamController();

在这里实现了一个计时效果，所以需要一个定时器 Timer 来实时刷新页面获取当前系统时间以更新页面显示，核心代码如下：全部代码在这里

class _TestABPageState extends State {///测试数据String _message = "--";///使用单订阅流即可StreamController<String> _streamController = StreamController();///计时器Timer _timer;@overridevoid initState() {super.initState();///间隔1秒执行时间_timer= Timer.periodic(Duration(milliseconds: 1000), (timer) {///获取当前的时间DateTime dateTime= DateTime.now();///格式化时间String formatTime = DateFormat("HH:mm:ss").format(dateTime);_message=formatTime;///流数据更新_streamController.add("$formatTime");});}@overridevoid dispose() {super.dispose();///关闭_streamController.close();///取消计时器_timer.cancel();}... ... 省略
}

然后再结合 Android Studio 的 Flutter Performance 调试工具，可查看得知页面数据刷新了StreamBuilder内部包裹的Widget数据状态,同时内存GC更新时间间隔出比较长，如下图所示：

在应用业务开发中，巧妙的使用 StreamBuilder 实现局部数据刷新机制可巧妙的提升应用的性能。

当不使用 StreamBuilder 实现的计时功能，核心实现代码如下：全部代码在这里

///测试数据String _message = "--";///计时器Timer _timer;@overridevoid initState() {super.initState();///间隔1秒执行时间_timer = Timer.periodic(Duration(milliseconds: 1000), (timer) {///获取当前的时间DateTime dateTime = DateTime.now();///格式化时间String formatTime = DateFormat("HH:mm:ss").format(dateTime);setState(() {_message = formatTime;});});}@overrideWidget build(BuildContext context) {///页面主体脚手架return Scaffold(appBar: AppBar(title: Text("测试Stream $_message"),),body: Text('当前时间  $_message ',style: TextStyle(fontSize: 22, color: Colors.blue),),);}

运行效果及内存分析如下图所示：

在不使用 StreamBuilder 时，setState 刷新的是当前页面中所有的Widget数据状态，然后从上图分析也得知内存GC的时间间隔也是比较知的，所以性能相对来讲是较低的。

2 业务场景应用

如下图是我们的产品中的一个签到页面，大家可以看到，签到按钮的背景在缓慢变化，然后一个计时器，1.0版本未使用 StreamBuilder ，全部是清一色的 setState ，如下图可看到页面的刷新频率，而且整个 Widget 页面中所有的组件会全部被刷新。

当使用 StreamBuilder 优化方案后，如下图所示：

完毕

以小编的性格，要实现百万Demo随时复制粘贴肯定是需要源码的

点击查看详情

当然以小编的性格，肯定是要有视频录制的，目前正在录制中，你可以关注一下西瓜视频 — 早起的年轻人随后会上传