Flutter实现倒计时功能
时间:2022-07-22
本文章向大家介绍Flutter实现倒计时功能,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天。
本文是异步编程的定时器策略篇章,通过Timer来实现。
定时器的使用场景一般如下
- 间隔一定的时间循环发起查询undefined
- 倒计时
通过Timer实现间隔一定时间的循环执行
Timer的periodic函数开启一个循环执行的任务,其参数一用来配制间隔执行这个任务的时间,参数二用来配置具体执行的任务,在使用时需要注意有创建就要有销毁,以避免内存泄漏,如开启一个间隔1秒的定时任务,如下代码清单1-1所示:
class _FutureLoopTestPageState extends State {
///声明变量
Timer _timer;
@override
void initState() {
super.initState();
///循环执行
///间隔1秒
_timer = Timer.periodic(Duration(milliseconds: 1000), (timer) {
///定时任务
});
}
@override
void dispose() {
///取消计时器
_timer.cancel();
super.dispose();
}
...
}
实现一个APP启动页面的倒计时
如下图所示为常见App的一个启动页面的倒计时显示效果,对应代码清单 1-3.
对应的实现代码如下:
///代码清单 1-3 实现一个倒计时
class FutureLoopTestPage2 extends StatefulWidget {
@override
_FutureLoopTestPageState createState() => _FutureLoopTestPageState();
}
//lib/code/main_data.dart
class _FutureLoopTestPageState extends State<FutureLoopTestPage2> {
///声明变量
Timer _timer;
///记录当前的时间
int curentTimer = 0;
@override
void initState() {
super.initState();
///循环执行
///间隔1秒
_timer = Timer.periodic(Duration(milliseconds: 1000), (timer) {
///自增
curentTimer++;
///到5秒后停止
if (curentTimer == 5) {
_timer.cancel();
}
setState(() {});
});
}
@override
void dispose() {
///取消计时器
_timer.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("倒计时"),
),
backgroundColor: Colors.white,
///填充布局
body: Container(
padding: EdgeInsets.all(20),
width: double.infinity,
height: double.infinity,
child: Column(
children: [
///层叠布局将进度与文字叠在一起
Stack(
///子Widget居中
alignment: Alignment.center,
children: [
///圆形进度
CircularProgressIndicator(
///当前指示的进度 0.0 -1.0
value: curentTimer / 5,
),
///显示的文本
Text("${5-curentTimer}"),
],
)
],
)),
);
}
}
在上述代码清单 1-3 中所示的效果,圆形进度执行的有点死板的效果,如下图所示为优化后的效果,给人的视觉效果比较舒适,对应代码清单1-4。
///代码清单 1-4
class FutureLoopTestPage3 extends StatefulWidget {
@override
_FutureLoopTestPageState createState() => _FutureLoopTestPageState();
}
//lib/code/main_data.dart
class _FutureLoopTestPageState extends State<FutureLoopTestPage3> {
///声明变量
Timer _timer;
///记录当前的时间
int curentTimer = 0;
@override
void initState() {
super.initState();
///循环执行
///间隔1秒
_timer = Timer.periodic(Duration(milliseconds: 100), (timer) {
///自增
curentTimer+=100;
///到5秒后停止
if (curentTimer >= 5000) {
_timer.cancel();
}
setState(() {});
});
}
@override
void dispose() {
///取消计时器
_timer.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("倒计时"),
),
backgroundColor: Colors.white,
///填充布局
body: Container(
padding: EdgeInsets.all(20),
width: double.infinity,
height: double.infinity,
child: Column(
children: [
///层叠布局将进度与文字叠在一起
Stack(
///子Widget居中
alignment: Alignment.center,
children: [
///圆形进度
CircularProgressIndicator(
///当前指示的进度 0.0 -1.0
value: curentTimer / 5000,
),
///显示的文本
Text("${(curentTimer/1000).toInt()}"),
],
)
],
)),
);
}
}
代码清单 1-3 与代码 清单1-4中所示的效果有完全不同的视觉效果,在代码实现的方式上只是刷新频率的不一样。
完毕
- Android数据库Realm实践
- Android事件处理概述
- Android中基于监听的事件处理
- 新推出的GridLayout网格布局
- Android scrollview嵌套webview滑动冲突的解决方案
- 几乎不用但要了解的AbsoluteLayout绝对布局
- 两分钟掌握FrameLayout帧布局
- 善用TableLayout表格布局,事半功倍
- 轻松掌握RelativeLayout相对布局
- 如何正确使用padding和margin
- 两种对齐方式,layout_gravity和gravity大不同
- GridView属性和使用方法
- ListView数据动态更新
- ListView优化和列表首尾使用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法