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

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

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

先看下效果：

兩種需求場景：

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

2.短信驗證碼60s倒計時

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

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));
 }

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

第二種的話就是需要不斷的做出倒計時的動作。

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ū)別是：第一種只會回調(diào)一次，就是超時時間到了之后執(zhí)行callback回調(diào)方法，而Timer.periodic調(diào)用方式是循環(huán)不斷的調(diào)用，比如說通過這種方式，你設(shè)置的超時時間是1s的話，那就會每隔1s調(diào)用一次callback的回調(diào)方法，也就是通過這種方式來實現(xiàn)我們的短信驗證碼60s倒計時獲取。

看下具體用法吧：

 Timer _timer;
 int _timeCount = 60;

觸發(fā)事件：

onTap: () {
   _startTimer();
},

處理方法：

void _startTimer() {
  ToastUtil.showTips('短信驗證碼已發(fā)送，請注意查收');
  _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實現(xiàn)短信驗證碼獲取60s倒計時功能的代碼的文章就介紹到這了,更多相關(guān)Flutter短信驗證碼倒計時內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: