Flutter之Timer實(shí)現(xiàn)短信驗(yàn)證碼獲取60s倒計(jì)時(shí)功能的代碼

更新時(shí)間：2020年07月08日 11:59:20 作者：管管

這篇文章主要介紹了Flutter之Timer實(shí)現(xiàn)短信驗(yàn)證碼獲取60s倒計(jì)時(shí)功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

先看下效果：

兩種需求場(chǎng)景：

1.廣告頁(yè)3s后跳轉(zhuǎn)到首頁(yè)

2.短信驗(yàn)證碼60s倒計(jì)時(shí)

第一種的話，根據(jù)需求我們可以知道，我們想要的效果就是3s結(jié)束做出一個(gè)動(dòng)作。

factory Timer(Duration duration, void callback()) {
  if (Zone.current == Zone.root) {
   // No need to bind the callback. We know that the root's timer will
   // be invoked in the root zone.
   return Zone.current.createTimer(duration, callback);
  }
  return Zone.current
    .createTimer(duration, Zone.current.bindCallbackGuarded(callback));
 }

兩個(gè)參數(shù)，第一個(gè)參數(shù)超時(shí)時(shí)間，即多久后執(zhí)行你想要的動(dòng)作，第二個(gè)參數(shù)callback回調(diào)方法，即超時(shí)后你想要執(zhí)行的動(dòng)作是什么，比如跳轉(zhuǎn)到首頁(yè)。

第二種的話就是需要不斷的做出倒計(jì)時(shí)的動(dòng)作。

factory Timer.periodic(Duration duration, void callback(Timer timer)) {
  if (Zone.current == Zone.root) {
   // No need to bind the callback. We know that the root's timer will
   // be invoked in the root zone.
   return Zone.current.createPeriodicTimer(duration, callback);
  }
  var boundCallback = Zone.current.bindUnaryCallbackGuarded<Timer>(callback);
  return Zone.current.createPeriodicTimer(duration, boundCallback);
 }

這種調(diào)用方式和上面的方式的區(qū)別是：第一種只會(huì)回調(diào)一次，就是超時(shí)時(shí)間到了之后執(zhí)行callback回調(diào)方法，而Timer.periodic調(diào)用方式是循環(huán)不斷的調(diào)用，比如說(shuō)通過(guò)這種方式，你設(shè)置的超時(shí)時(shí)間是1s的話，那就會(huì)每隔1s調(diào)用一次callback的回調(diào)方法，也就是通過(guò)這種方式來(lái)實(shí)現(xiàn)我們的短信驗(yàn)證碼60s倒計(jì)時(shí)獲取。

看下具體用法吧：

 Timer _timer;
 int _timeCount = 60;

觸發(fā)事件：

onTap: () {
   _startTimer();
},

處理方法：

void _startTimer() {
  ToastUtil.showTips('短信驗(yàn)證碼已發(fā)送，請(qǐng)注意查收');
  _timer = Timer.periodic(Duration(seconds: 1), (Timer timer) => {
   setState(() {
    if(_timeCount <= 0){
     _autoCodeText = '重新獲取';
     _timer.cancel();
     _timeCount = 60;
    }else {
     _timeCount -= 1;
     _autoCodeText = "$_timeCount" + 's';
    }
   })
  });
 }

到此這篇關(guān)于Flutter之Timer實(shí)現(xiàn)短信驗(yàn)證碼獲取60s倒計(jì)時(shí)功能的代碼的文章就介紹到這了,更多相關(guān)Flutter短信驗(yàn)證碼倒計(jì)時(shí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: