Flutter倒計(jì)時(shí)/計(jì)時(shí)器的實(shí)現(xiàn)代碼
在我們實(shí)現(xiàn)某些功能時(shí),可能會(huì)有倒計(jì)時(shí)的需求。
比如發(fā)送短信驗(yàn)證碼,發(fā)送成功后可能要求用戶(hù)一段時(shí)間內(nèi)不能再次發(fā)送,這時(shí)候我們就需要進(jìn)行倒計(jì)時(shí),時(shí)間到了才允許再次操作。
如下圖:

為了實(shí)現(xiàn)這樣場(chǎng)景的需求,我們需要使用 Timer.periodic 。
一、引入Timer對(duì)應(yīng)的庫(kù)
import 'dart:async';
二、定義計(jì)時(shí)變量
class _LoginPageState extends State<LoginPage> {
...
Timer _timer;
int _countdownTime = 0;
...
}
三、點(diǎn)擊后開(kāi)始倒計(jì)時(shí)
這里我們點(diǎn)擊 發(fā)送驗(yàn)證碼 文字來(lái)舉例說(shuō)明。
GestureDetector(
onTap: () {
if (_countdownTime == 0 && validateMobile()) {
//Http請(qǐng)求發(fā)送驗(yàn)證碼
...
setState(() {
_countdownTime = 60;
});
//開(kāi)始倒計(jì)時(shí)
startCountdownTimer();
}
},
child: Text(
_countdownTime > 0 ? '$_countdownTime后重新獲取' : '獲取驗(yàn)證碼',
style: TextStyle(
fontSize: 14,
color: _countdownTime > 0
? Color.fromARGB(255, 183, 184, 195)
: Color.fromARGB(255, 17, 132, 255),
),
),
)
四、倒計(jì)時(shí)的實(shí)現(xiàn)方法
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()取消定時(shí)器
@override
void dispose() {
super.dispose();
if (_timer != null) {
_timer.cancel();
}
}
這樣我們就實(shí)現(xiàn)了發(fā)送驗(yàn)證碼的倒計(jì)時(shí)功能。除此之外,Timer還能做其他的很多事情,有興趣的同學(xué)可以查看Timer的 官方文檔 。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android控件RecyclerView實(shí)現(xiàn)混排效果仿網(wǎng)易云音樂(lè)
這篇文章主要為大家詳細(xì)介紹了Android控件RecyclerView實(shí)現(xiàn)混排效果,仿網(wǎng)易云音樂(lè),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10
Android實(shí)現(xiàn)長(zhǎng)圖文截圖功能實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Android實(shí)現(xiàn)長(zhǎng)圖文截圖功能的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
Android系統(tǒng)在shell中的df命令實(shí)現(xiàn)
今天小編就為大家分享一篇關(guān)于Android系統(tǒng)在shell中的df命令實(shí)現(xiàn),小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2018-12-12
在Android設(shè)備上搭建Web服務(wù)器的方法
本篇文章主要介紹了在Android設(shè)備上搭建Web服務(wù)器的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
Android中獲得手機(jī)屏幕大小實(shí)現(xiàn)代碼
這篇文章主要介紹了Android中獲得手機(jī)屏幕大小實(shí)現(xiàn)代碼,Android開(kāi)發(fā)中經(jīng)常需要獲得屏幕的寬高,本文直接封裝成一個(gè)工具類(lèi),需要的朋友可以參考下2015-06-06
android7.0實(shí)現(xiàn)分享圖片到朋友圈功能
這篇文章主要為大家詳細(xì)介紹了android7.0實(shí)現(xiàn)分享圖片到朋友圈功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05
Android自定義view實(shí)現(xiàn)水波進(jìn)度條控件
這篇文章主要為大家詳細(xì)介紹了Android自定義view實(shí)現(xiàn)水波進(jìn)度條控件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05
講解Android中的Widget及AppWidget小工具的創(chuàng)建實(shí)例
這篇文章主要介紹了講解Android中的Widget及Widget的創(chuàng)建實(shí)例,文中的例子展示了通過(guò)RemoteView來(lái)溝通AppWidgetProvider與AppWidgetHostView的方法,需要的朋友可以參考下2016-03-03

