首先倒计时用到 Timer
1.导入头文件
import 'dart:async';
2.创建StatefulWidget"CountDownButton",定义以下字段。在类外面定义一个点击方法
//字体颜色 默认黑色
final Color textColor;
//倒计时字体颜色 默认黑色
final Color timeTextColor;
//倒计时时间 默认60
final int countdownNum;
//倒计时文字
final String codeCountdownStr;
//标题
final String title;
//高度
final double height;
//宽度
final double width;
//按钮点击回调
final CountDownButtonCallBack onTap;
//是否执行倒计时(用于外部控制)
final bool isStarTimer;
//结束倒计时回调,用于重置倒计时标记
final Function callBack;
//是否在外部调用倒计时(默认false)
final bool isExternalDown;
/// 倒计时按钮点击回调方法
typedef CountDownButtonCallBack = void Function();
3.在state页面定义Timer实例
Timer _countdownTimer;
//是否倒计时中
bool isCountDown = false;
//倒计时数字
int downCount;
4.布局文件
@override
Widget build(BuildContext context) {
return InkWell(
child: Container(
alignment: Alignment.center,
width: width,
height: height,
child: Text( isCountDown ? "${downCount}${codeCountdownStr??"s 后重新发送"}" : title,
style: TextStyle(
color: isCountDown ? textColor ??ColorUtils.BLACK : timeTextColor ??ColorUtils.BLACK,
)
),
),
onTap: _tap,
);
}
5.点击事件,及倒计时方法
/// 按钮点击
void _tap(){
//倒计时是否开启,如果开启则不响应点击事件
if (isCountDown == false){
//默认false
isExternalDown?? false ? onTap() : _countDown();
}
//_countDown();
}
/// 按钮执行倒计时方法
void _countDown(){
downCount = countdownNum ?? 60;
isCountDown = true;
if (_countdownTimer != null) {
return;
}
// Timer的第一秒倒计时是有一点延迟的,为了立刻显示效果可以添加下一行。
setState(() {
downCount--;
});
//定时任务
_countdownTimer = new Timer.periodic(new Duration(seconds: 1), (timer){
setState(() {
//判断数字数字大于0减一,否则停止倒计时,恢复显示内容,
if (downCount > 1){
downCount--;
}else{
if (downCount == 1){
isCountDown = false;
_countdownTimer.cancel();
_countdownTimer = null;
callBack(false);
}
}
});
});
6.需要在didUpdateWidget中调用倒计时方法,用于外部控制倒计时
//判断是否执行倒计时
if (widget.isStarTimer && !isCountDown && isExternalDown ??false){
_countDown();
}
7.最后记得dispose中调用cancel方法
@override
void dispose() {
// TODO: implement dispose
_countdownTimer?.cancel();
_countdownTimer = null;
super.dispose();
}
调用方法, 暂时没有想到好的办法,现在需要外部定义一个bool值isStarTimer来判断是否开始倒计时
Padding(
padding: EdgeInsets.only(top: 30),
child: CountDownButton(
title: "获取验证码",
width: 120,
height: 30,
isExternalDown: true,
isStarTimer: isStarTimer,
onTap: _countDownTap,
callBack: (f) => isStarTimer = f,
),
)
///按钮点击方法
void _countDownTap(){
setState(() {
isStarTimer = true;
});
}
网友评论