Flutter学习笔记(40)

Stella981
• 阅读 699

如需转载,请注明出处:Flutter学习笔记(40)--Timer实现短信验证码获取60s倒计时

先看下效果:

Flutter学习笔记(40)

两种需求场景:

1.广告页3s后跳转到首页

2.短信验证码60s倒计时

第一种的话,根据需求我们可以知道,我们想要的效果就是3s结束做出一个动作。

factory Timer(Duration duration, void callback()) {
    if (Zone.current == Zone.root) {
      // No need to bind the callback. We know that the root's timer will
      // be invoked in the root zone.
      return Zone.current.createTimer(duration, callback);
    }
    return Zone.current
        .createTimer(duration, Zone.current.bindCallbackGuarded(callback));
  }

 两个参数,第一个参数超时时间,即多久后执行你想要的动作,第二个参数callback回调方法,即超时后你想要执行的动作是什么,比如跳转到首页。

第二种的话就是需要不断的做出倒计时的动作。

factory Timer.periodic(Duration duration, void callback(Timer timer)) {
    if (Zone.current == Zone.root) {
      // No need to bind the callback. We know that the root's timer will
      // be invoked in the root zone.
      return Zone.current.createPeriodicTimer(duration, callback);
    }
    var boundCallback = Zone.current.bindUnaryCallbackGuarded<Timer>(callback);
    return Zone.current.createPeriodicTimer(duration, boundCallback);
  }

这种调用方式和上面的方式的区别是:第一种只会回调一次,就是超时时间到了之后执行callback回调方法,而Timer.periodic调用方式是循环不断的调用,比如说通过这种方式,你设置的超时时间是1s的话,那就会每隔1s调用一次callback的回调方法,也就是通过这种方式来实现我们的短信验证码60s倒计时获取。

看下具体用法吧:

  Timer _timer;
  int _timeCount = 60;

触发事件:

onTap: () {
     _startTimer();
},

处理方法:

void _startTimer() {
    ToastUtil.showTips('短信验证码已发送,请注意查收');
    _timer = Timer.periodic(Duration(seconds: 1), (Timer timer) => {
      setState(() {
        if(_timeCount <= 0){
          _autoCodeText = '重新获取';
          _timer.cancel();
          _timeCount = 60;
        }else {
          _timeCount -= 1;
          _autoCodeText = "$_timeCount" + 's';
        }
      })
    });
  }
点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
3年前
PHP 利用json_decode解析json为null问题解决
PS:原创文章,如需转载,请注明出处,谢谢!   本文地址:http://flyer0126.iteye.com/blog/2382708(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.iteye.com%2Fblog%2F2382708%2F)   今天遇到js
Stella981 Stella981
3年前
SpringBoot整合RabbitMQ
springboot学习笔记springboot整合RabbitMQ(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.cnblogs.com%2Fhlhdidi%2Fp%2F6535677.html)
Wesley13 Wesley13
3年前
Java NIO 学习笔记(四)
目录:JavaNIO学习笔记(一)概述,Channel/Buffer(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.cnblogs.com%2Fczwbig%2Fp%2F10035631.html)JavaNIO学习笔记(二)聚集和
Stella981 Stella981
3年前
OpenLayers 6 学习笔记
这个是真的学习笔记!不是教程转载请声明:https://www.cnblogs.com/onsummer/p/12159366.html(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.cnblogs.com%2Fonsummer%2Fp%2F12159366.h
Easter79 Easter79
3年前
SpringBoot整合RabbitMQ
springboot学习笔记springboot整合RabbitMQ(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.cnblogs.com%2Fhlhdidi%2Fp%2F6535677.html)
Stella981 Stella981
3年前
FFmpeg数据结构AVPacket
本文为作者原创,转载请注明出处:https://www.cnblogs.com/leisure\_chn/p/10410320.html(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.cnblogs.com%2Fleisure_chn%2Fp%2F10410320.html)
Stella981 Stella981
3年前
Flutter学习笔记(31)
如需转载,请注明出处:Flutter学习笔记(31)异步更新UI(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.cnblogs.com%2Fupwgh%2Fp%2F13100886.html)大家都知道,子线程不能操作UI控件,在我们Android的日常开发中,经常会遇
Stella981 Stella981
3年前
Linux网络栈
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11394930.html(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.cnblogs.com%2Fagilestyle%2Fp%2F11394930.html)O
Stella981 Stella981
3年前
PyCharm2020激活破解教程
本文内容皆为作者原创,如需转载,请注明出处:https://www.cnblogs.com/xuexianqi/p/12767075.html(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.cnblogs.com%2Fxuexianqi%2Fp%2F12767075.
Stella981 Stella981
3年前
C++笔记002:VS2010报错:LINK fatal error LNK1123 转换到 COFF 期间失败文件无效或损坏
 原创笔记,转载请注明出处!点击【关注】,关注也是一种美德~错误描述:1已启动生成:项目:FirstCode,配置:DebugWin321生成启动时间为2018/2/521:00:30。1InitializeBuildStatus:1 正在