Flutter之Timer实现短信验证码获取60s倒计时功能的代码

 更新时间:2020年07月08日 11:59:20   作者:管管  
这篇文章主要介绍了Flutter之Timer实现短信验证码获取60s倒计时功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

先看下效果:

两种需求场景:

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';
    }
   })
  });
 }

到此这篇关于Flutter之Timer实现短信验证码获取60s倒计时功能的代码的文章就介绍到这了,更多相关Flutter短信验证码倒计时内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Android 未读消息的红点显示

    Android 未读消息的红点显示

    本篇文章主要介绍了"Android基础—未读消息的红点显示", 在很多APP里面,经常会看到未读消息的小红点,如下图:这个功能用到的是一个控件,叫做BadgeView。 BadgeView的用法很简单,直接把jar文件导入
    2017-04-04
  • Android Studio使用小技巧:自定义Logcat

    Android Studio使用小技巧:自定义Logcat

    这篇文章主要介绍了Android Studio使用小技巧:自定义Logcat,本文讲解如何自定义Logcat的颜色,实现区别verbose、debug、error等分类信息,需要的朋友可以参考下
    2015-05-05
  • 基于android startActivityForResult的学习心得总结

    基于android startActivityForResult的学习心得总结

    本篇文章是对android中的startActivityForResult进行了详细的分析介绍,需要的朋友参考下
    2013-05-05
  • Android动画教程之属性动画详解

    Android动画教程之属性动画详解

    这篇文章主要给大家介绍了关于Android动画教程之属性动画的相关资料,文中通过示例代码介绍的非常详细,对各位Android开发者们具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • android studio集成ijkplayer的示例代码

    android studio集成ijkplayer的示例代码

    本篇文章主要介绍了android studio集成ijkplayer的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Android使用SimpleDateFormat警告介绍

    Android使用SimpleDateFormat警告介绍

    大家好,本篇文章讲的是Android使用SimpleDateFormat警告介绍,感兴趣的同学快来看一看吧,希望对你起到帮助
    2021-11-11
  • Android实现支付宝蚂蚁森林水滴浮动效果

    Android实现支付宝蚂蚁森林水滴浮动效果

    这篇文章主要为大家详细介绍了Android实现支付宝蚂蚁森林水滴浮动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • Android之ArcSlidingHelper制作圆弧滑动效果

    Android之ArcSlidingHelper制作圆弧滑动效果

    这篇文章主要介绍了Android之ArcSlidingHelper制作圆弧滑动效果,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-08-08
  • Android自定义View实现自动吸附功能

    Android自定义View实现自动吸附功能

    这篇文章主要为大家详细介绍了Android自定义View实现自动吸附功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • Android 图文详解Binder进程通信底层原理

    Android 图文详解Binder进程通信底层原理

    Android系统中,多进程间的通信都是依赖于底层Binder IPC机制,Binder机制是一种RPC方案。例如:当进程A中的Activity与进程B中的Service通信时,就使用了binder机制
    2021-10-10

最新评论