最近一直不知道在忙什么，或许忙着思考人生吧！明确一下人生方向，纠结了好久，始终没有明白以后往哪走。打算放一下对人生的思考，写点文章，总结一下最近的学习(╹▽╹)，现在回过头来看这个做法有点二，async包里面的Timer更好用。
[图片上传中...(image.png-37d86d-1540784030421-0)]
import 'package:flutter/material.dart';
typedef void StopCount(bool b);
typedef void StartCountAction(BuildContext context);
class TimerWidget extends StatefulWidget {
final int time;
final StartCountAction startCountAction;
TimerWidget({this.time = 10, this.startCountAction});
@override
State createState() {
return new _TimerWidgetState();
}
}
class _TimerWidgetState extends State<TimerWidget> {
bool isPressed = false;
Widget timer;
void _startCount(bool b) {
setState(() {
isPressed = b;
});
}
void _stopCount(bool b) {
setState(() {
isPressed = !b;
});
}
@override
Widget build(BuildContext context) {
return new GestureDetector(
onTap: () {
if (isPressed) {
return;
}
timer = new TimerCount(
time: 10,
stopCount: _stopCount,
);
widget.startCountAction(context);
_startCount(true);
},
child: isPressed ? timer : new Text('点击获得验证码'),
);
}
}
class TimerCount extends StatefulWidget {
final int time;
final StopCount stopCount;
final String leftLabel;
final String rightLabel;
TimerCount(
{this.time = 60,
this.stopCount,
this.leftLabel = '还有',
this.rightLabel = '秒重发'});
@override
State createState() {
return new _TimerCountState();
}
}
class _TimerCountState extends State<TimerCount> {
int _time;
bool isPressed = false;
@override
void initState() {
super.initState();
setState(() {
_time = widget.time;
});
_triggerStart();
}
void _count() {
Future.delayed(const Duration(seconds: 1), _triggerStart);
}
void _triggerStart() {
if (_time <= 0) {
widget.stopCount(true);
return;
}
_count();
setState(() {
_time -= 1;
print(_time);
});
}
@override
Widget build(BuildContext context) {
return new Container(
child: new Text(widget.leftLabel + '$_time' + widget.rightLabel),
);
}
}
第一步，分析需求。点击倒计时的时候，控件上显示倒计时提示，显示倒计时时间，同时倒计时开始时可以进行一定回调。
第二步，确定应用场景。用于发送验证码。
第三部，预测bug。出现重复点击，重复显示倒计时或者读秒显示混乱。
第四部，确定整体思路。首先flutter框架里面的控件widget是分为有状态的（StatefulWidget ）和无状态的（StatelessWidget），对于有状态的weidget是通过state管理，通过更新状态来更新ui。所以，我们可以用有状态的widget防止重复点击，通过更新状态来读秒，通过定义回调函数来，最终让控件可以实现发送验证码的功能。
首先顶定义一个TimerWidget ，这个控件用于控件有两个属性，time用户设置控件倒计时时长；StartCountAction 用户倒计时开始的回调，可以用于发送验证码。再定义一个TimerCount ，这个用于绘制倒计时。
文笔不好，还望见谅！
直接上代码
最后要感谢这些小伙伴们的无私分享：
网友评论