Flutter倒計時/計時器的實現代碼
更新時間：2019年03月31日 14:32:27 作者：羅伊德的技術博客
這篇文章主要介紹了Flutter倒計時/計時器的實現代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
在我們實現某些功能時，可能會有倒計時的需求。
比如發(fā)送短信驗證碼，發(fā)送成功后可能要求用戶一段時間內不能再次發(fā)送，這時候我們就需要進行倒計時，時間到了才允許再次操作。
如下圖：
為了實現這樣場景的需求，我們需要使用 Timer.periodic 。
一、引入Timer對應的庫
import 'dart:async';
二、定義計時變量
class _LoginPageState extends State<LoginPage> {
...
Timer _timer;
int _countdownTime = 0;
...
}
三、點擊后開始倒計時
這里我們點擊 發(fā)送驗證碼 文字來舉例說明。
GestureDetector(
onTap: () {
if (_countdownTime == 0 && validateMobile()) {
//Http請求發(fā)送驗證碼
...
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();
}
}
這樣我們就實現了發(fā)送驗證碼的倒計時功能。除此之外，Timer還能做其他的很多事情，有興趣的同學可以查看Timer的 官方文檔 。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了Android自定義View多種效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
Android控件RecyclerView實現混排效果仿網易云音樂
這篇文章主要為大家詳細介紹了Android控件RecyclerView實現混排效果，仿網易云音樂，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要給大家介紹了關于Android實現長圖文截圖功能的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11
今天小編就為大家分享一篇關于Android系統在shell中的df命令實現，小編覺得內容挺不錯的，現在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2018-12-12
本篇文章主要介紹了在Android設備上搭建Web服務器的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
本篇文章主要介紹了Android應用程序更新并下載實例，非常具有實用價值，需要的朋友可以參考下。2017-03-03
這篇文章主要介紹了Android中獲得手機屏幕大小實現代碼,Android開發(fā)中經常需要獲得屏幕的寬高,本文直接封裝成一個工具類,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細介紹了android7.0實現分享圖片到朋友圈功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要為大家詳細介紹了Android自定義view實現水波進度條控件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
講解Android中的Widget及AppWidget小工具的創(chuàng)建實例
這篇文章主要介紹了講解Android中的Widget及Widget的創(chuàng)建實例,文中的例子展示了通過RemoteView來溝通AppWidgetProvider與AppWidgetHostView的方法,需要的朋友可以參考下2016-03-03