写一个倒计时定时器听起来真的好简单,然而在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();
}