溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Flutter中Timer實(shí)現(xiàn)短信驗(yàn)證碼獲取60s倒計(jì)時(shí)的方法

發(fā)布時(shí)間：2020-07-09 09:43:59 來源：億速云 閱讀：719 作者：清晨 欄目：開發(fā)技術(shù)

不懂Flutter中Timer實(shí)現(xiàn)短信驗(yàn)證碼獲取60s倒計(jì)時(shí)的方法？其實(shí)想解決這個(gè)問題也不難，下面讓小編帶著大家一起學(xué)習(xí)怎么去解決，希望大家閱讀完這篇文章后大所收獲。

先看下效果：

Flutter中Timer實(shí)現(xiàn)短信驗(yàn)證碼獲取60s倒計(jì)時(shí)的方法

兩種需求場景：

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

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)到首頁。

第二種的話就是需要不斷的做出倒計(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)用，比如說通過這種方式，你設(shè)置的超時(shí)時(shí)間是1s的話，那就會(huì)每隔1s調(diào)用一次callback的回調(diào)方法，也就是通過這種方式來實(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';
    }
   })
  });
 }

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享Flutter中Timer實(shí)現(xiàn)短信驗(yàn)證碼獲取60s倒計(jì)時(shí)的方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手