第三百零二回

2024-02-02 23:20

文章标签 第三二回百零

本文主要是介绍第三百零二回，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

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的初始值，但是它显示完初始化值后马上又变成了0stream: 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才停止计时。