专栏首页恩蓝脚本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 ? '$_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的 官方文档 。

以上就是本文的全部内容,希望对大家的学习有所帮助。

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://www.zalou.cn复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • Flutter实现倒计时功能

    Timer的periodic函数开启一个循环执行的任务,其参数一用来配制间隔执行这个任务的时间,参数二用来配置具体执行的任务,在使用时需要注意有创建就要有销毁,...

    早起的年轻人
  • Android使用Handler实现定时器与倒计时器功能

    Handler是Android消息机制的上层接口,它为我们封装了许多底层的细节,让我们能够很方便的使用底层的消息机制。Handler的最常见应用场景之一便是通过...

    砸漏
  • Android倒计时功能的实现代码

    好久没有写博客了,趁着年末,总结了下最近一年所遇到的一些技术问题,还有一些自定义控件,比如倒计时功能

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

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

    砸漏
  • 非常有用的并发控制-倒计时器CountDownLatch

    CountDownLatch见名思义,即倒计时器,是多线程并发控制中非常有用的工具类,它可以控制线程等待,直到倒计时器归0再继续执行。 给你出个题,控制5个线...

    Java技术栈
  • 【Flutter 专题】135 图解 Timer & ACETimerButton 自定义计时器按钮

    和尚在学习 Flutter 过程中,可能会遇到倒计时等需求,此时需要用到 Timer 计时器,和尚简单尝试一下;

    阿策小和尚
  • Android 列表倒计时的实现的示例代码(CountDownTimer)

    实习一段时间了,一直想写点技术总结,但一直没找到合适的主题。刚好,最近版本中我负责的模块遇到了个线程相关问题(之前一直画界面,做点基础功能,有点乏味),列表项倒...

    砸漏
  • Flutter 实现网易云音乐字幕的代码

    没有接触过音乐字幕方面知识的话,会对字幕的实现比较迷茫,什么时候转到下一句?看了这篇文章,你就会明白字幕so easy。

    砸漏
  • Flutter实现代码提示功能

    在实现代码提示功能前,我们先来看看什么是代码提示,当我输入关键字String 时,如果输入到 Stri 的时候,编辑器会为我找出所有包含 Stri 的代码关键词...

    rhyme_lph
  • flutter 实现多布局列表的示例代码

    闲来无事,写个玩安卓的首页,实现多布局、banner的效果。其中涉及知识点侧滑,pageview 切换页面,页面跳转传值及回调数据(在侧滑里)。这些都是基于自己...

    砸漏
  • 优雅的实现程序计时器

    日常编码中,如果想对某一段程序计时,应该怎么做呢?比较简单粗暴的办法就是开始和结束各自取当前时间戳.

    呼延十
  • html倒计时的代码!

    PHP开发工程师
  • Flutter BLoC 异步通信、BlocBuilder的基本使用、BlocProvider的初探

    BloC 全称是 Business Logic Component(业务逻辑组件),主要作用就是将业务逻辑和UI组件分离开。

    早起的年轻人
  • Flutter 系统是如何实现ExpansionPanelList的示例代码

    在了解ExpansionPanelList实现前,先来了解下MergeableMaterial,它展示多个MergeableMaterialItem组件,当子组...

    砸漏
  • JS实现倒计时代码实例「建议收藏」

    发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/129520.html原文链接:https://javaforall.cn

    全栈程序员站长
  • 谷歌大佬强势分享《Jetpack Compose 权威指南》,带你参透声明式UI的终极奥义!

    声明式 UI 的大哥 Flutter 已经出道很久了,再学习 Compose 还有意义吗?Flutter 还是 Compose?先抛出我的结论:如果你想运用到实...

    用户1907613
  • Flutter pageview切换指示器的实现代码

    PageView 是一个滑动视图列表,它也是继承至 CustomScrollView 的。

    砸漏
  • Android RecyclerView实现拼团倒计时列表实例代码

    最近一直被需求赶着走,有些功能经过测试上线后就没再review。闲下来还是重新优化下老代码,温故而知新,还是有点收获和进步的

    砸漏
  • Android获取验证码倒计时实现代码

    本文实例为大家分享了Android获取验证码倒计时的具体代码,供大家参考,具体内容如下

    砸漏

扫码关注腾讯云开发者

领取腾讯云代金券