【Flutter】倒計時/計時器的實現

比如發送短信驗證碼，發送成功后可能要求用戶一段時間內不能再次發送，這時候我們就需要進行倒計時，時間到了才允許再次操作。

為了實現這樣場景的需求，我們需要使用Timer.periodic。

 

如下圖：

 

 

 

一、引入Timer對應的庫

import 'dart:async';

二、定義計時變量

class _LoginPageState extends State{
  ...
  Timer _timer;
  int _countdownTime = 0;
  ...
}

三、點擊后開始倒計時
這里我們點擊發送驗證碼文字來舉例說明。

GestureDetector(
  onTap: () {
    if (_countdownTime == 0 && validateMobile()) {
      //Http請求發送驗證碼
      ...
      setState(() {
        _countdownTime = 60;
      });
      //開始倒計時
      startCountdownTimer();
    }
  },
  child: Text(
    _countdownTime > 0 ? '$_countdownTime后重新獲取' : '獲取驗證碼',
    style: TextStyle(
      fontSize: 14,
      color: _countdownTime > 0
          ? Color.fromARGB(255, 183, 184, 195)
          : Color.fromARGB(255, 17, 132, 255),
    ),
  ),
)

四、倒計時的實現方法

void startCountdownTimer() {
  const oneSec = const Duration(seconds: 1);

  var callback = (timer) => {
    setState(() {
      if (_countdownTime < 1) { _timer.cancel(); } else { _countdownTime = _countdownTime - 1; } }) }; _timer = Timer.periodic(oneSec, callback); }

五、最后在dispose()取消定時器

@override
void dispose() {
  super.dispose();
  if (_timer != null) {
    _timer.cancel();
  }
}