Flutter倒计时/计时器的实现

摘抄自 https://juejin.im/post/5cada409e51d456e5b66ad1b

在我们实现某些功能时,可能会有倒计时的需求。
比如发送短信验证码,发送成功后可能要求用户一段时间内不能再次发送,这时候我们就需要进行倒计时,时间到了才允许再次操作。
如下图:
验证码倒计时 - 图1
image.png
为了实现这样场景的需求,我们需要使用Timer.periodic
一、引入Timer对应的库

  1. import 'dart:async';
  2. 复制代码

二、定义计时变量

  1. class _LoginPageState extends State<LoginPage> {
  2. ...
  3. Timer _timer;
  4. int _countdownTime = 0;
  5. ...
  6. }
  7. 复制代码

三、点击后开始倒计时
这里我们点击发送验证码文字来举例说明。

  1. GestureDetector(
  2. onTap: () {
  3. if (_countdownTime == 0 && validateMobile()) {
  4. //Http请求发送验证码
  5. ...
  6. setState(() {
  7. _countdownTime = 60;
  8. });
  9. //开始倒计时
  10. startCountdownTimer();
  11. }
  12. },
  13. child: Text(
  14. _countdownTime > 0 ? '$_countdownTime后重新获取' : '获取验证码',
  15. style: TextStyle(
  16. fontSize: 14,
  17. color: _countdownTime > 0
  18. ? Color.fromARGB(255, 183, 184, 195)
  19. : Color.fromARGB(255, 17, 132, 255),
  20. ),
  21. ),
  22. )
  23. 复制代码

四、倒计时的实现方法

  1. void startCountdownTimer() {
  2. const oneSec = const Duration(seconds: 1);
  3. var callback = (timer) => {
  4. setState(() {
  5. if (_countdownTime < 1) {
  6. _timer.cancel();
  7. } else {
  8. _countdownTime = _countdownTime - 1;
  9. }
  10. })
  11. };
  12. _timer = Timer.periodic(oneSec, callback);
  13. }
  14. 复制代码

五、最后在dispose()取消定时器

  1. @override
  2. void dispose() {
  3. super.dispose();
  4. if (_timer != null) {
  5. _timer.cancel();
  6. }
  7. }