Flutter StreamBuilder 异步更新数据

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


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

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

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

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


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

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

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

在这里插入图片描述

1 计时器实现

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

 ///代码清单1-1
 /// 监听Stream,每次值改变的时候,更新Text中的内容
 StreamBuilder<String> buildStreamBuilder() {
   return StreamBuilder<String>(
     ///绑定stream
     stream: _streamController.stream,
     ///默认的数据
     initialData: "00:00:00",
     ///构建绑定数据的UI
     builder: (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;

  @override
  void 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");
    });


  }


  @override
  void dispose() {
    super.dispose();
    ///关闭
    _streamController.close();
    
    ///取消计时器
    _timer.cancel();
  }
  ... ... 省略
}

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

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

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

///测试数据
 String _message = "--";
 ///计时器
 Timer _timer;

 @override
 void 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;
     });
   });
 }

 @override
 Widget 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随时复制粘贴肯定是需要源码的

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

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页