Flutter 倒计时

Flutter 倒计时

  写一个倒计时定时器听起来真的好简单，然而在 Flutter 里面写这个东西还是挺坑的。原本以为创建一个 Timer 就一切都搞定了，但并没办法实时获取倒计时的进度。

void countdown(){
    Timer timer = new Timer(new Duration(seconds: 10), () {
        // 只在倒计时结束时回调
    });
}

  看了一下源码，我们还可以创建一个周期性的 Timer，从打印结果可以看到 Timer 的 tick 是从1开始的。

void countdown(){
    Timer countdownTimer =  new Timer.periodic(new Duration(seconds: 1), (timer) {
        print(countdownTimer.tick);
    }
}

  我们修改一下做一个倒计时获取重新获取验证码的功能。

Timer _countdownTimer;
  String _codeCountdownStr = '获取验证码';
  int _countdownNum = 59;

  void reGetCountdown() {
    setState(() {
      if (_countdownTimer != null) {
          return;
      }
      // Timer的第一秒倒计时是有一点延迟的，为了立刻显示效果可以添加下一行。
      _codeCountdownStr = '${_countdownNum--}重新获取';
      _countdownTimer =
          new Timer.periodic(new Duration(seconds: 1), (timer) {
        setState(() {
          if (_countdownNum > 0) {
            _codeCountdownStr = '${_countdownNum--}重新获取';
          } else {
            _codeCountdownStr = '获取验证码';
            _countdownNum = 59;
            _countdownTimer.cancel();
            _countdownTimer = null;
          }
        });
      });
    });
  }

 // 不要忘记在这里释放掉Timer
 @override
  void dispose() {
    _countdownTimer?.cancel();
    _countdownTimer = null;
    super.dispose();
  }