flutter_bloc_倒计时

2019-06-06  本文已影响0人  songzhaojie

昨天有一个需求,要写一个验证码倒计时,其实这个比较好写滴,但是如果直接在当前页面直接开干的话,会增加界面臃肿,增加阅读时间,不好管理,本文就倒计时与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 ;

    }

}

}

上一篇 下一篇

猜你喜欢

热点阅读