溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在我們實現某些功能時，可能會有倒計時的需求。
比如發送短信驗證碼，發送成功后可能要求用戶一段時間內不能再次發送，這時候我們就需要進行倒計時，時間到了才允許再次操作。
如下圖：
為了實現這樣場景的需求，我們需要使用 Timer.periodic 。
一、引入Timer對應的庫
import 'dart:async';
二、定義計時變量
class _LoginPageState extends State<LoginPage> {
...
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();
}
}
這樣我們就實現了發送驗證碼的倒計時功能。除此之外，Timer還能做其他的很多事情，有興趣的同學可以查看Timer的 官方文檔 。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
