在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 如何重复性触发回调。

/   周期性触发   /

========================================================================