Flutter StreamBuilder 实现的一个倒计时功能

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


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

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

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

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


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

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

本文章最终实现的效果如下:
在这里插入图片描述
本效果在应用开发中常用于 APP 的开屏广告倒计时页面功能。


首先创建一个 单订阅流控制器 StreamController,通过 WidgetsBinding 来监听 Widget 绘制完成后开启一个 Timer 计时器,代码如下:

///通过流 Stream 实现的倒计时功能
///倒计时
class TestTimeProgressIndicatorPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _TestABPageState();
  }
}

class _TestABPageState extends State {
  ///单订阅流
  StreamController<double> _streamController = StreamController();
  ///计时器
  Timer _timer;
  ///倒计时6秒
  double totalTimeNumber = 6000;
  ///当前的时间
  double currentTimeNumber = 6000;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) { 
      ///当前页面绘制完第一帧后回调
      ///在这里开启定时器
      startTimer();
    });
    
  }


  @override
  void dispose() {
    super.dispose();
    ///关闭
    _streamController.close();
    _timer.cancel();
  }
  ... ...
}

Timer 计时器一旦执行了 cancel 方法后,就不可以再次重新覆用,所以在这里封装成了一个方法块,以便多次使用,创建 Timer 计时器的代码如下:

 void startTimer() {
   ///间隔100毫秒执行时间
   _timer = Timer.periodic(Duration(milliseconds: 100), (timer) {
     ///间隔100毫秒执行一次 每次减100
     currentTimeNumber -= 100;

     ///如果计完成取消定时
     if (currentTimeNumber <= 0) {
       _timer.cancel();
       currentTimeNumber = 0;
     }

     ///流数据更新
     _streamController.add(currentTimeNumber);
   });
 }

对于页面的主体结构还是使用了 Scaffold 脚手架组件来构建的,代码如下:

@override
 Widget build(BuildContext context) {
   ///页面主体脚手架
   return Scaffold(
     appBar: AppBar(
       title: Text("测试Stream "),
     ),
     body: Column(
       children: [
         
         ///圆圈部分
         Container(
           child: buildStreamBuilder(),
           margin: EdgeInsets.only(top: 20, left: 20),
         ),
         ///间隔
         SizedBox(
           height: 40,
         ),
         
         ///Demo的控制按钮
         OutlineButton(
           child: Text('开始倒计时'),
           onPressed: () {
             currentTimeNumber = totalTimeNumber;
             if (!_timer.isActive) {
               startTimer();
             }
           },
         )
       ],
     ),
   );
 }

在这里通过 StreamBuilder 实时来刷新进度与文字显示的,代码如下:

 /// 监听Stream,每次值改变的时候,更新Text中的内容
 StreamBuilder<double> buildStreamBuilder() {
   return StreamBuilder<double>(
     ///绑定stream
     stream: _streamController.stream,
     ///默认的数据
     initialData: 0,
     ///构建绑定数据的UI
     builder: (BuildContext context, AsyncSnapshot<double> snapshot) {
       return Stack(
         ///子Widget 居中对齐
         alignment: Alignment.center,
         children: [
           ///中间显示的文本
           Text(
             (snapshot.data / 1000).toStringAsFixed(0),
             style: TextStyle(fontSize: 22, color: Colors.blue),
           ),
           ///圆圈进度
           CircularProgressIndicator(
             value: 1.0 - snapshot.data / totalTimeNumber,)
         ],
       );
     },
   );
 }

运行调试效果如下:

在这里插入图片描述


完毕

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

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

在这里插入图片描述

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