不懂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倒计时的方法内容对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,遇到问题就找亿速云,详细的解决方法等着你来学习!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。