Flutter 倒计时

写一个倒计时定时器听起来真的好简单，然而在 Flutter 里面写这个东西还是挺坑的。原本以为创建一个 Timer 就一切都搞定了，但并没办法实时获取倒计时的进度。

void countdown(){Timer timer = new Timer(new Duration(seconds: 10), () {// 只在倒计时结束时回调});
}

看了一下源码，我们还可以创建一个周期性的 Timer，从打印结果可以看到 Timer 的 tick 是从1开始的。

void countdown(){Timer countdownTimer =  new Timer.periodic(new Duration(seconds: 1), (timer) {print(countdownTimer.tick);}
}

我们修改一下做一个倒计时获取重新获取验证码的功能。

Timer _countdownTimer;String _codeCountdownStr = '获取验证码';int _countdownNum = 59;void reGetCountdown() {setState(() {if (_countdownTimer != null) {return;}// Timer的第一秒倒计时是有一点延迟的，为了立刻显示效果可以添加下一行。_codeCountdownStr = '${_countdownNum--}重新获取';_countdownTimer =new Timer.periodic(new Duration(seconds: 1), (timer) {setState(() {if (_countdownNum > 0) {_codeCountdownStr = '${_countdownNum--}重新获取';} else {_codeCountdownStr = '获取验证码';_countdownNum = 59;_countdownTimer.cancel();_countdownTimer = null;}});});});}// 不要忘记在这里释放掉Timer@overridevoid dispose() {_countdownTimer?.cancel();_countdownTimer = null;super.dispose();}

Flutter 倒计时相关推荐

Flutter 倒计时实现
Flutter 倒计时实现 1.此组建用时间戳计算倒计时 import 'dart:async'; import 'package:flutter/material.dart';import 'dar ...
flutter倒计时TimerUtil工具类
更多文章请查看 lutter从入门到精通 flutter 提供了 Timer 来执行定时任务 common_utils 工具类已经封装了 Timer 一个计时工具类 TimerUtil,可实现倒计 ...
Flutter 倒计时功能
一.说明要实现一个类似上图中滑动列表项倒计时功能,其中剩余时间是需要每分钟更新一次. 二.功能实现 class ItemOrderWidget extends StatefulWidget {fin ...
Flutter 项目开发指导从基础入门到精通使用目录
Flutter 从入门到精通系列文章本文章为 Flutter 开发中的经验积累分享.教程分享.开发笔记分享目录,持续维护中. 题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. Fl ...
Flutter开发之倒计时/定时器（30）
倒计时/定时器在移动应用开发中比较常见的功能,比如启动时的广告倒计时.比如弹框倒计时.比如定时1秒后跳转.获取验证码等等.今天就认识一下Flutter中的倒计时/定时器. 一般有两种场景: 我只需要你 ...
Flutter StreamBuilder 实现的一个倒计时功能
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. Flutter是谷歌推出的最新的移动开发框架. [x1]微信公众号的每日提醒随时随记每日积累随心而过 [x2]各种系列的视频教程 ...
Flutter实现倒计时功能
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. ** 你可能需要 CSDN 网易云课堂教程掘金 EDU学院教程知乎 Flutter系列文章本文是异步编程的定时器 ...
Flutter布局锦囊---验证码倒计时
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "获取验证码按钮",可以通过点击按钮来获取验证码. 然后就可以开始进行编码了. 第1步:绘制组件树第2步:实现" ...
Flutter学习之倒计时计时器
1.自定义倒计时计时器控件: import 'dart:async'; import 'package:flutter/material.dart';final TextStyle _availabl ...
Flutter 快速上手定时器/倒计时及实战讲解
本文微信公众号「AndroidTraveler」首发. 今天给大家讲讲 Flutter 里面定时器/倒计时的实现. 一般有两种场景: 我只需要你在指定时间结束后回调告诉我.回调只需要一次. 我需要你在 ...

Flutter 倒计时

Flutter 倒计时

Flutter 倒计时相关推荐

最新文章

热门文章