美文网首页
flutter_bloc_倒计时

flutter_bloc_倒计时

作者: songzhaojie | 来源:发表于2019-06-06 16:51 被阅读0次

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

    }

}

}

相关文章

  • flutter_bloc_倒计时

    昨天有一个需求,要写一个验证码倒计时,其实这个比较好写滴,但是如果直接在当前页面直接开干的话,会增加界面臃肿,增加...

  • 倒计时

    新年倒计时…中考倒计时…高考倒计时…告别学生倒计时…假期倒计时…睡觉倒计时…起床倒计时… 生活中,很多与我们息息相...

  • 倒计时不仅使我们焦躁,还可以使我们振奋啊

    中考倒计时,高考倒计时, 倒计时100天 倒计时50天 倒计时10天 倒计时5天 ........ 这个场景想必在...

  • 倒计时

    文/木子 开学倒计时了 爸妈回去倒计时了 教师节倒计时了 国庆节倒计时了 小儿12岁倒计时了 寒假倒计时了 元旦倒...

  • wordlist 13

    倒计时倒计时

  • wordlist 11

    倒计时倒计时

  • van-count-down 倒计时相关问题

    1. 倒计时重置问题 背景:业务需要在开启倒计时、暂停、恢复倒计时实时判断是否展示倒计时,并重置倒计时 问题:直接...

  • iOS开发-倒计时

    倒计时 倒计时60s 倒计时HH-MM-SS 1.倒计时60s 很多时候在点击按钮发送短信的时候需要倒计时读秒 2...

  • 10.27

    倒计时第一天,倒计时7,好想赶快到倒计时1。

  • 1小时倒计时

    倒计时 目前我们内部用的比较多的倒计时:一个小时的倒计时、12个小时的倒计时。 examinePassTime:审...

网友评论

      本文标题:flutter_bloc_倒计时

      本文链接:https://www.haomeiwen.com/subject/xxeuxctx.html