昨天有一个需求,要写一个验证码倒计时,其实这个比较好写滴,但是如果直接在当前页面直接开干的话,会增加界面臃肿,增加阅读时间,不好管理,本文就倒计时与flutter_bloc 结合讲解一下,个人感觉还是可以滴,😂😂😂走起
需求: 点击按钮 倒计时60开始,中间不能点击按钮,直到结束为止,
1,创建bloc.dart, 使用bloc(不会滴可以去百度或者看前面几篇文章)ok
2,创建事件event
3,创建继承bloc 类,
4,根据需求知道我们需要一个数据,跟一个bool值,这时state 可以是一个字典啦
5, 创建一个定时器去发送事件,跟算法
下面是完整封装方法
abstract class Event {
}
class CountEventextends Event{
@override
StringtoString() {
// TODO: implement toString
return 'CountEvent';
}
}
class CoundBlocextends Bloc<Event,Map>{
Timer_countdownTimer;
int_count;
@override
// TODO: implement initialState
Mapget initialState {
Map schoolsMap =new Map();
schoolsMap['count'] ='重新获取';
schoolsMap['click'] ='true';
return schoolsMap;
}
void startOpen(){
_count=60;
_countdownTimer=null;
_countdownTimer =
new Timer.periodic(new Duration(seconds:1), (timer) {
if(_count==0){
_countdownTimer.cancel();
}else
{
_count--;
dispatch(CountEvent());
}
});
}
@override
void dispose() {
// TODO: implement dispose
_countdownTimer?.cancel();
_countdownTimer=null;
super.dispose();
}
@override
StreammapEventToState(Event event)async* {
// TODO: implement mapEventToState
if(eventis Event){
Map schoolsMap =new Map();
schoolsMap['count'] ='${_count==0?'重新获取':'重新获取(${_count})'}';
if(_count==0){
schoolsMap['click'] ='true';
}else {
schoolsMap['click'] ='flase';
}
yield schoolsMap;
return ;
}
}
}
网友评论