Flutter倒計時定時器(一)

????????寫一個倒計時定時器聽起來真的好簡單,然而在Flutter里面寫這個東西還是挺坑的。

????????原本以為創(chuàng)建一個Timer就一切都搞定了,但并沒辦法實時獲取倒計時的進度。

void countdown(){
    Timer timer = new Timer(new Duration(seconds: 10), () {
        // 只在倒計時結(jié)束時回調(diào)
    });
}

????????看了一下源碼,我們還可以創(chuàng)建一個周期性的Timer,從打印結(jié)果可以看到Timer的tick是從1開始的。

void countdown(){
    Timer countdownTimer =  new Timer.periodic(new Duration(seconds: 1), (timer) {
        print(countdownTimer.tick);
    }
}

????????我們修改一下做一個倒計時獲取重新獲取驗證碼的功能。

  Timer _countdownTimer;
  String _codeCountdownStr = '獲取驗證碼';
  int _countdownNum = 59;

  void reGetCountdown() {
    setState(() {
      if (_countdownTimer != null) {
          return;
      }
      // Timer的第一秒倒計時是有一點延遲的,為了立刻顯示效果可以添加下一行。
      _codeCountdownStr = '${_countdownNum--}重新獲取';
      _countdownTimer =
          new Timer.periodic(new Duration(seconds: 1), (timer) {
        setState(() {
          if (_countdownNum > 0) {
            _codeCountdownStr = '${_countdownNum--}重新獲取';
          } else {
            _codeCountdownStr = '獲取驗證碼';
            _countdownNum = 59;
            _countdownTimer.cancel();
            _countdownTimer = null;
          }
        });
      });
    });
  }

 // 不要忘記在這里釋放掉Timer
 @override
  void dispose() {
    _countdownTimer?.cancel();
    _countdownTimer = null;
    super.dispose();
  }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容