Flutter倒计时定时器

Timer

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

Timer.periodic

可以创建一个周期性的Timer,并且Timer的tick是从1开始的

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

Timer.periodic实践

验证码倒计时

实现一个倒计时获取重新获取验证码的功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
Timer _countdownTimer;
String _codeCountdownStr = '获取验证码';
int _countdownNum = 59;

@override
void initState() {
super.initState();
}

void reGetCountdown() {
setState(() {
if (_countdownTimer != null) {
return;
}
// Timer的第一秒倒计时是有一点延迟的,为了立刻显示效果可以添加下一行
_codeCountdownStr = '${_countdownNum--}S重新获取';
_countdownTimer = new Timer.periodic(new Duration(seconds: 1), (timer) {
setState(() {
if (_countdownNum > 0) {
_codeCountdownStr = '${_countdownNum--}S重新获取';
} else {
_codeCountdownStr = '获取验证码';
_countdownNum = 59;
_countdownTimer.cancel();
_countdownTimer = null;
}
});
});
});
}

// 不要忘记在这里释放掉Timer
@override
void dispose() {
_countdownTimer?.cancel();
_countdownTimer = null;
super.dispose();
}

定时刷新子控件

定时刷新子控件,同时使用于StatelessWidget及StatefulWidget的子控件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
int timerTick;

@override
void initState() {
super.initState();
_countdownTimer = new Timer.periodic(new Duration(seconds: 1), (timer) {
//print(_countdownTimer.tick);
setState(() {
timerTick = _countdownTimer.tick;
});
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
...
CountDownWidget(
tick: timerTick,
)
...
);
}

@override
void dispose() {
_countdownTimer?.cancel();
_countdownTimer = null;
super.dispose();
}

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :