Flutter倒計(jì)時(shí)/計(jì)時(shí)器的實(shí)現(xiàn)代碼
更新時(shí)間：2019年03月31日 14:32:27 作者：羅伊德的技術(shù)博客
這篇文章主要介紹了Flutter倒計(jì)時(shí)/計(jì)時(shí)器的實(shí)現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
在我們實(shí)現(xiàn)某些功能時(shí)，可能會有倒計(jì)時(shí)的需求。
比如發(fā)送短信驗(yàn)證碼，發(fā)送成功后可能要求用戶一段時(shí)間內(nèi)不能再次發(fā)送，這時(shí)候我們就需要進(jìn)行倒計(jì)時(shí)，時(shí)間到了才允許再次操作。
如下圖：
為了實(shí)現(xiàn)這樣場景的需求，我們需要使用 Timer.periodic 。
一、引入Timer對應(yīng)的庫
import 'dart:async';
二、定義計(jì)時(shí)變量
class _LoginPageState extends State<LoginPage> {
...
Timer _timer;
int _countdownTime = 0;
...
}
三、點(diǎn)擊后開始倒計(jì)時(shí)
這里我們點(diǎn)擊 發(fā)送驗(yàn)證碼 文字來舉例說明。
GestureDetector(
onTap: () {
if (_countdownTime == 0 && validateMobile()) {
//Http請求發(fā)送驗(yàn)證碼
...
setState(() {
_countdownTime = 60;
});
//開始倒計(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的 官方文檔 。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
條件數(shù)據(jù)庫Android:sqllite的簡單使用
條件數(shù)據(jù)庫Android:sqllite的簡單使用，需要的朋友可以參考一下2013-05-05
本文主要介紹Android ListView,這里整理了ListView 組件的資料，并附示例代碼和實(shí)現(xiàn)效果圖，有需要的朋友可以參考下2016-08-08
這篇文章主要介紹了Android開發(fā)的注冊登錄方法,是針對Android程序設(shè)計(jì)中版本兼容性的進(jìn)一步完善,需要的朋友可以參考下2014-08-08
關(guān)于Android中ListView嵌套GridView的問題
在Android開發(fā)的過程中可能需要用到listview嵌套gridview的場景，但是在嵌套過程中也許會遇到問題，我們下面一起來看看是什么問題以及如何解決。2016-08-08
這篇文章主要為大家介紹了Android?Adapter適配器使用示例講解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
Android實(shí)現(xiàn)判斷某個(gè)服務(wù)是否正在運(yùn)行的方法
這篇文章主要介紹了Android實(shí)現(xiàn)判斷某個(gè)服務(wù)是否正在運(yùn)行的方法,涉及Android針對系統(tǒng)服務(wù)運(yùn)行狀態(tài)的判斷技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)計(jì)步器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
Android開發(fā)中數(shù)據(jù)庫升級且表添加新列的方法
這篇文章主要介紹了Android開發(fā)中數(shù)據(jù)庫升級且表添加新列的方法,結(jié)合具體實(shí)例形式分析了Android數(shù)據(jù)庫升級開發(fā)過程中常見問題與相關(guān)操作技巧,需要的朋友可以參考下2017-09-09
flutter?material?widget組件之信息展示組件使用詳解
這篇文章主要為大家詳細(xì)介紹了flutter?material?widget組件之信息展示組件的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
Android之日期及時(shí)間選擇對話框用法實(shí)例分析
這篇文章主要介紹了Android之日期及時(shí)間選擇對話框用法,以實(shí)例形式較為詳細(xì)的分析了Android創(chuàng)建日期及時(shí)間選擇對話框的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09