Flutter倒计时/计时器的实现代码

发布时间:2019-08-08 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Flutter倒计时/计时器的实现代码脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

在我们实现某些功能时,可能会有倒计时的需求。

比如发送短信验证码,发送成功后可能要求用户一段时间内不能再次发送,这时候我们就需要进行倒计时,时间到了才允许再次操作。

如下图:

Flutter倒计时/计时器的实现代码

为了实现这样场景的需求,我们需要使用 Timer.PEriodic

一、引入Timer对应的库

 import 'dart:async';

二、定义计时变量

 class _LoginPagestate extends State<LOGinPage> {  ...  Timer _timer;  int _countdownTime = 0;  ... }

三、点击后开始倒计时

这里我们点击 发送验证码 文字来举例说明。

 Gesturedetector(  onTap: () {   if (_countdownTime == 0 && validatemobile()) {    //Http请求发送验证码    ...    setState(() {     _countdownTime = 60;    });    //开始倒计时    startCountdownTimer();   }  },  child: Text(   _countdownTime > 0 &#63; '$_countdownTime后重新获取' : '获取验证码',   style: TextStyle(    fontSize: 14,    color: _countdownTime > 0      ? Color.FromargB(255, 183, 184, 195)      : Color.fromARGB(255, 17, 132, 255),   ),  ), )

四、倒计时的实现方法

 void startCountdownTimer() {  const oneSec = const Duration(seconds: 1);   VAR callback = (timer) => {   setState(() {    if (_countdownTime < 1) {     _timer.cancel();    } else {     _countdownTime = _countdownTime - 1;    }   })  };   _timer = Timer.periodic(oneSec, callback); }

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

 @override void dispose() {  super.dispose();  if (_timer != null) {   _timer.cancel();  } }

这样我们就实现了发送验证码的倒计时功能。除此之外,Timer还能做其他的很多事情,有兴趣的同学可以查看Timer的 官方文档

android教程
脚本网站
android studio

脚本宝典总结

以上是脚本宝典为你收集整理的Flutter倒计时/计时器的实现代码全部内容,希望文章能够帮你解决Flutter倒计时/计时器的实现代码所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。