Flutter實(shí)現(xiàn)倒計(jì)時(shí)秒數(shù)轉(zhuǎn)時(shí)分秒然后倒計(jì)時(shí)功能
Flutter實(shí)現(xiàn)倒計(jì)時(shí)功能
發(fā)布時(shí)間:2023/05/12本文實(shí)例為大家分享了Flutter實(shí)現(xiàn)倒計(jì)時(shí)功能的具體代碼,供大家參考,具體內(nèi)容如下
有一個(gè)需求,需要在頁面進(jìn)行顯示倒計(jì)時(shí),倒計(jì)時(shí)結(jié)束后,做相應(yīng)的邏輯處理。
實(shí)現(xiàn)思路:在Flutter中,Timer.periodic提供了循環(huán)功能,查看函數(shù)定義:
factory Timer.periodic(Duration duration, void callback(Timer timer))
第一個(gè)參數(shù)就是時(shí)間間隔,第二個(gè)參數(shù)就是事件處理回調(diào)。
由于后臺(tái)返回的是秒數(shù),所以需要根據(jù)總秒數(shù)計(jì)算小時(shí),分鐘,秒。同時(shí),當(dāng)不滿一個(gè)小時(shí)時(shí),只顯示分鐘和秒數(shù),當(dāng)分鐘和秒數(shù)只有一個(gè)數(shù)時(shí)(比如1分8秒,顯示為01:08)前面加“0”處理。
完整代碼:
import 'package:flutter/material.dart'; import 'dart:async'; class CounterDownPage extends StatefulWidget { @override _CounterDownPageState createState() => _CounterDownPageState(); } class _CounterDownPageState extends State<CounterDownPage> { // 用來在布局中顯示相應(yīng)的剩余時(shí)間 String remainTimeStr = ''; Timer _timer; //倒計(jì)時(shí) void startCountDown(int time) { // 重新計(jì)時(shí)的時(shí)候要把之前的清除掉 if (_timer != null) { if (_timer.isActive) { _timer.cancel(); _timer = null; } } if (time <= 0) { return; } var countTime = time; const repeatPeriod = const Duration(seconds: 1); _timer = Timer.periodic(repeatPeriod, (timer) { if (countTime <= 0) { timer.cancel(); timer = null; //待付款倒計(jì)時(shí)結(jié)束,可以在這里做相應(yīng)的操作 return; } countTime--; //外面?zhèn)鬟M(jìn)來的單位是秒,所以需要根據(jù)總秒數(shù),計(jì)算小時(shí),分鐘,秒 int hour = (countTime ~/ 3600) % 24;//如果不止24小時(shí)的就不用%24 int minute = countTime % 3600 ~/60; int second = countTime % 60; var str = ''; if (hour > 0) { str = str + hour.toString()+':'; } if (minute / 10 < 1) {//當(dāng)只有個(gè)位數(shù)時(shí),給前面加“0”,實(shí)現(xiàn)效果:“:01”,":02" str = str + '0' + minute.toString() + ":"; } else { str = str + minute.toString() + ":"; } if (second / 10 < 1) { str = str + '0' + second.toString(); } else { str = str + second.toString(); } setState(() { remainTimeStr = str; }); }); } @override void initState() { super.initState(); //開始倒計(jì)時(shí),這里傳入的是秒數(shù) startCountDown(5000); } @override void dispose() { super.dispose(); if (_timer != null) { if (_timer.isActive) { _timer.cancel(); _timer = null; } } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("倒計(jì)時(shí)"), ), body: Center( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text("剩余", style: TextStyle( fontSize: 18, color: Color.fromRGBO(255, 111, 50, 1), fontWeight: FontWeight.bold ),), Text(remainTimeStr.length > 0 ? remainTimeStr: "--", style: TextStyle( fontSize: 18, color: Color.fromRGBO(255, 111, 50, 1), fontWeight: FontWeight.bold ),), ], ), ), ); } }
服務(wù)器返回的時(shí)間戳87392,現(xiàn)在的時(shí)間戳+87392 現(xiàn)在的時(shí)間戳,兩者的時(shí)間戳相差二十多個(gè)小時(shí),也就是說87392就是秒數(shù),直接傳秒數(shù)到上面的startCountDown方法即可。
到此這篇關(guān)于Flutter實(shí)現(xiàn)倒計(jì)時(shí)功能,秒數(shù)轉(zhuǎn)時(shí)分秒,然后倒計(jì)時(shí)的文章就介紹到這了,更多相關(guān)Flutter倒計(jì)時(shí)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android懸浮窗按鈕實(shí)現(xiàn)點(diǎn)擊并顯示/隱藏多功能列表
這篇文章主要為大家詳細(xì)介紹了Android懸浮窗按鈕實(shí)現(xiàn)點(diǎn)擊并顯示/隱藏多功能列表,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07Android之解析JSON數(shù)據(jù)示例(android原生態(tài),F(xiàn)astJson,Gson)
本篇文章主要介紹了Android之解析JSON數(shù)據(jù)示例,主要使用android原生態(tài)代碼解析,F(xiàn)astJson,Gson三種方法,有興趣的可以了解一下。2017-02-02Android自定義雙向進(jìn)度條的實(shí)現(xiàn)代碼
本篇文章主要介紹了Android自定義雙向進(jìn)度條的實(shí)現(xiàn)代碼,非常具有實(shí)用的價(jià)值,有興趣的同學(xué)一起來了解一下2017-09-09Flutter實(shí)現(xiàn)手勢識(shí)別功能詳解方法
在Flutter中使用GestureDetector可以來完成對手勢的識(shí)別,包括長按、滑動(dòng)、雙擊等手勢,這篇文章主要介紹了Flutter實(shí)現(xiàn)手勢識(shí)別功能2022-11-11android通過led實(shí)現(xiàn)手電筒功能
這篇文章主要為大家詳細(xì)介紹了android通過led實(shí)現(xiàn)手電筒功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09android尺子的自定義view——RulerView詳解
這篇文章主要介紹了android尺子的自定義view——RulerView詳解,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03Android源碼解析onResume方法中獲取不到View寬高
這篇文章主要為大家介紹了Android源碼解析onResume方法中獲取不到View寬高示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02Android實(shí)現(xiàn)圖片瀏覽并改變透明度
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)圖片瀏覽并改變透明度,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08