第二百零四回

文章目录

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

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

第二百零四回_第1张图片

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才停止计时。

4. 内容总结

最后,我们对本章回的内容做一个全面总结:

  • 使用Stream的periodic方法可以实现倒计时功能;
  • 使用Timer的periodic方法也可以实现倒计时功能;
  • 两种方法相比较后就会发现使用Timer实现倒计时功能更加灵活一些;
    看官们,与"如何实现倒计时功能"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

你可能感兴趣的:(一起Talk,Flutter吧,移动开发Flutter)