Flutter中“倒计时”的那些事儿

好久不见了，文章有一段时间没有更新了，最近一直在沉迷工作无法自拨😂。上周，应公司号召以及上次Google大会中Flutter宣讲的感染，计划将公司新项目采用Flutter技术实现。大概花了几天熟悉了一下Flutter基础语法和结构组成，便着手开始项目的搭建和基础模块功能开发，毕竟只有通过实战才能加快新技术的熟悉和“消化”。

说到验证码功能，我们通常的做法可能是借助于计时器来实现，抱着几乎肯定的态度赶紧去查了一下 Flutter 官网有没有相关的计时器组件。果不其然，官方的确为我们提供了一个 Timer 组件来实现倒计时，我们来看看官方对于它的描述：

A count-down timer that can be configured to fire once or repeatedly.

即它是一个支持一次或者多次周期性触发的计时器。首先，让我们来熟悉这两种场景下的基本用法。

单次触发

这种情况下的一般场景是作为延时器来使用，我们并不会接收到倒计时的进度，只会在倒计时结束后收到回调提醒。例如，我们来看下 Flutter 官方提供的示例代码：

const timeout = const Duration(seconds: 3);
const ms = const Duration(milliseconds: 1);

startTimeout([int milliseconds]) {
  var duration = milliseconds == null ? timeout : ms * milliseconds;
  return new Timer(duration, handleTimeout);
}
...
void handleTimeout() {  // callback function
  ...
}

从上面代码可以看到，通过 new Timer(Duration duration, void callback()) 方式创建的定时器会提供一个 callback 回调方法来处理计时结束后的操作。这显然不符合我们验证码功能中实时显示进度的需求，让我们来看看 Timer 如何重复性触发回调。

周期性触发

周期性触发计时回调的场景就很普遍了，只要是涉及到定时相关的操作可能都离不开它：我们既需要被告知计时什么时候结束，也需要实时地监测计时的进度。这正符合了我们最初想要的验证码功能这个需求。dart-async 包 同样为我们提供了 Timer.periodic 构造方法来创建一个可以重复回调的计时器：

Timer.periodic(
	Duration duration,
	void callback(
		Timer timer
	)
)

此外，官方是这样描述 callback 参数的：

The callback is invoked repeatedly with duration intervals unti