第二百九十九回

news2024/11/13 8:55:36

文章目录

1. 概念介绍
2. 实现方法
- 2.1 使用Steam实现
- 2.2 使用Timer实现
3. 示例代码
4. 内容总结

我们在上一章回中介绍了"如何实现每隔一段时间执行某项目任务"相关的内容，本章回中将介绍如何实现倒计时功能.闲话休提，让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

倒计时功能估计大家都熟悉，经常用在一些节目开始或者开奖活动中。程序中也会用到倒计时，比如在网上支付时会有一个支付成功的倒计时，显示多少秒后支付成功。本
章回中将详细介绍如何实现倒计时功能。

2. 实现方法

我们将介绍两种实现方法，一种通过Stream实现，另外一种通过Timer实现，接下来的小节中，我们将详细介绍这两种方法的实现过程。

2.1 使用Steam实现

创建一个倒计时可用的时间，这个时间与项目需求有关；
创建Stream并且调用periodic方法来启动计时功能；
使用StreamBuilder组件监听Stream中数值的变化；
在StreamBuilder中显示倒计时数值，结束时停止显示倒计时数值；

2.2 使用Timer实现

创建一个倒计时可用的时间，这个时间与项目需求有关；
创建Timer对象并且调用它的periodic方法来启动计时功能；
使用Text组件显示时间值，并且通过setState()方法更新时间值；

3. 示例代码

///使用Stream实现倒计时功能
int countdownClock = 10;

StreamBuilder(
  ///InitiData是event的初始值，但是它显示完初始化值后马上又变成了0
  stream: Stream.periodic(const Duration(seconds: 1),(event)=>(countdownClock-event)).take(countdownClock+1),
  initialData: 0,
  builder: (context,data){
    if(data.data != null && data.data == 0) {
      return Text("starting",style: const TextStyle(color: Colors.black),);
    }
    return Text("${data.data.toString()} s",style: const TextStyle(color: Colors.black),
);


///自己实现的计时器，和Stream.periodic()方法的原理相同，不同之处在于可以控制事件的逻辑，Stream中只能是做加法
TextButton(
  onPressed: () {
    Timer.periodic(const Duration(seconds: 1,), (timer) {
      setState(() {
        countdownTime++;
        if(countdownTime == 5) {
          timer.cancel();
        }
      });
    });
  },
  child: countdownTime == 0 ? const Text("Start") : Text(countdownTime.toString()),
),
///模拟上一个内容，做成倒计时,不过需要先启动上一个按钮，加到5以后才能启动下一个按钮
TextButton(
  onPressed: () {
    Timer.periodic(const Duration(seconds: 1,), (timer) {
      setState(() {
        countdownTime--;
        if(countdownTime == 0) {
          timer.cancel();
        }
      });
    });
  },
  child: countdownTime != 0 ? const Text("Start") : Text(countdownTime.toString()),
),

上面的示例代码中演示了两种创建倒计时的方法，它们在原理上是相同的，都是使用了Timer的periodic方法来实现计时功能。相比较而言，Timer更加灵活一些，它可
以对数值进行加法或者减法等灵活操作。Stream则只能进行了加法操作，为此我们在代码中通过作差来实现减法功能。我在这里就不演示程序的运行结果了，建议大家
自己动手去实践，这样可以看到数值在变化，直到0才停止计时。