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

淩亂°似流年 2022-12-24 10:57 104阅读 0赞

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

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

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

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

--------------------

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

*  Provider 正在发文中
 *  ValueNotifier （[点击查看详情][Link 1]）
 *  Stream: [StreamController的使用详情][StreamController] | [StreamBuilder组件的结合使用][StreamBuilder] | StreamBuilder 实现的倒计时进度圆圈(本文)
 *  EventBus 正在发文中
 *  Bloc 正在发文中

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

本文章最终实现的效果如下： ![在这里插入图片描述][55db1747d633d011bd679c8804413b71.gif] 本效果在应用开发中常用于 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,)
             ],
           );
         },
       );
     }
    复制代码

运行调试效果如下：

![在这里插入图片描述][3792f3a031b9a937b78599aecc3c4d82.gif]

--------------------

完毕

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

*  [github 源码 点击查看详情][github _]

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

作者：早起的年轻人  
链接：https://juejin.cn/post/6886313178397933576  
来源：掘金  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[x1_ _ _]: https://mp.weixin.qq.com/mp/homepage?__biz=MzA4MjIzOTE2Mw==&hid=1&sn=432233d701e1e1a93d897073955bd472&scene=18
[x2_ _ _]: https://www.toutiao.com/c/user/token/MS4wLjABAAAAYMrKikomuQJ4d-cPaeBqtAK2cQY697Pv9xIyyDhtwIM/
[x3_ _ Demo _ _]: https://biglead.blog.csdn.net/article/details/93532582
[Link 1]: https://biglead.blog.csdn.net/article/details/109151309
[StreamController]: https://biglead.blog.csdn.net/article/details/109153078
[StreamBuilder]: https://biglead.blog.csdn.net/article/details/109163005
[55db1747d633d011bd679c8804413b71.gif]: /images/20221120/87a28baa48384bca8844af53cd531a14.png
[Timer]: https://biglead.blog.csdn.net/article/details/107884416
[Scaffold]: https://blog.csdn.net/zl18603543572/article/details/94167100
[3792f3a031b9a937b78599aecc3c4d82.gif]: /images/20221120/3b5e08666e544c3aa47d2aede9237019.png
[github _]: https://github.com/zhaolongs/flutter_demo_app/blob/master/lib/async/test_progress_time_page.dart