Flutter實(shí)現(xiàn)倒計(jì)時(shí)功能
本文實(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;
? ? 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
? ? ? ? ?),),
? ? ? ?],
? ? ? ),
? ? ? ),
? ? );
? }
}效果:

以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android Broadcast原理分析之registerReceiver詳解
這篇文章主要介紹了Android Broadcast原理分析之registerReceiver詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
微信瀏覽器彈出框滑動(dòng)時(shí)頁面跟著滑動(dòng)的實(shí)現(xiàn)代碼(兼容Android和IOS端)
小編在做微信開發(fā)的時(shí)候遇到微信瀏覽器彈出框滑動(dòng)時(shí)頁面跟著滑動(dòng)的效果,下面把關(guān)鍵代碼分享給大家,需要的朋友參考下2016-11-11
基于RxJava實(shí)現(xiàn)酷炫啟動(dòng)頁
本文介紹怎樣利用RxJava來實(shí)現(xiàn)Android的啟動(dòng)頁,啟動(dòng)頁的效果非常酷,有需要的朋友們可以參考。2016-07-07
Android?WindowManger實(shí)現(xiàn)桌面懸浮窗功能
這篇文章主要介紹了Android?WindowManger實(shí)現(xiàn)桌面懸浮窗功能,他們基本都是在Activity之上顯示的,如果想實(shí)現(xiàn)在桌面顯示的懸浮窗效果,需要用到WindowManager來實(shí)現(xiàn)了,需要的朋友可以參考下2023-04-04
在Android上實(shí)現(xiàn)HttpServer的示例代碼
本篇文章主要介紹了在Android上實(shí)現(xiàn)HttpServer的示例代碼,實(shí)現(xiàn)Android本地的微型服務(wù)器,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08
android應(yīng)用實(shí)現(xiàn)開機(jī)自動(dòng)啟動(dòng)方法
這篇文章主要介紹了android應(yīng)用實(shí)現(xiàn)開機(jī)自動(dòng)啟動(dòng)方法,本文講解了原理和編碼實(shí)例,需要的朋友可以參考下2015-05-05
Android網(wǎng)絡(luò)編程之簡易新聞客戶端
這篇文章主要為大家詳細(xì)介紹了Android網(wǎng)絡(luò)編程之簡易新聞客戶端的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
Android Studio添加第三方庫的注意事項(xiàng)
這篇文章給大家介紹的是Android Studio添加第三方庫遇到的一些坑,以及對(duì)應(yīng)的解決辦法,有需要的可以參考借鑒。2016-09-09

