Flutter 快速上手定時器/倒計時及實戰講解
本文微信公眾號「AndroidTraveler」首發。
今天給大家講講 Flutter 裡面定時器/倒計時的實現。
一般有兩種場景:
- 我只需要你在指定時間結束後回撥告訴我。回撥只需要一次。
- 我需要你在指定時間結束後回撥告訴我。回撥可能多次。
下面針對這兩種場景,我們來說下如何在 Flutter 裡面使用。
回撥一次的定時器
const timeout = const Duration(seconds: 5); print('currentTime='+DateTime.now().toString()); Timer(timeout, () { //到時回撥 print('afterTimer='+DateTime.now().toString()); });
這裡我們設定了超時時間為 5 秒。然後啟動一個定時器,等到 5 秒時候到了,就會執行回撥方法。
我們在定時器啟動之前和之後都加上了列印日誌,控制檯列印輸出如下:
flutter: currentTime=2019-06-08 13:56:35.347493
flutter: afterTimer=2019-06-08 13:56:40.350412
用法總結起來就是:
1.設定超時時間 timeout
2.啟動定時器 Timer(timeout, callback)
3.處理回撥 callback
回撥多次的定時器
回撥多次的定時器用法和回撥一次的差不多,區別有下面兩點:
- API 呼叫不同
- 需要手動取消,否則會一直回撥,因為是週期性的
一樣的我們通過一個簡單的小例子來說明:
int count = 0; const period = const Duration(seconds: 1); print('currentTime='+DateTime.now().toString()); Timer.periodic(period, (timer) { //到時回撥 print('afterTimer='+DateTime.now().toString()); count++; if (count >= 5) { //取消定時器,避免無限回撥 timer.cancel(); timer = null; } });
這裡我們的功能是每秒回撥一次,當達到 5 秒後取消定時器,一共 回調了 5 次。
控制檯輸出如下:
flutter: currentTime=2019-06-08 14:16:02.906858
flutter: afterTimer=2019-06-08 14:16:03.909963
flutter: afterTimer=2019-06-08 14:16:04.910538
flutter: afterTimer=2019-06-08 14:16:05.911942
flutter: afterTimer=2019-06-08 14:16:06.911741
flutter: afterTimer=2019-06-08 14:16:07.910227
用法總結起來就是:
1.設定週期回撥時間 period
2.啟動定時器 Timer.periodic(period, callback(timer))
3.處理回撥 callback(timer)
4.記得在合適時機取消定時器,否則會一直回撥
好了,有了上面的知識儲備,接下來,讓我們進入實戰講解環節。
實戰講解
業務場景
伺服器返回一個時間,你根據伺服器的時間和當前時間的對比,顯示倒計時,倒計時的時間在一天之內,超過一天顯示預設文案即可。
場景分析
這個業務場景在倒計時這一塊就需要使用到我們上面的知識了。由於限定了倒計時是在一天之內,所以顯示的文案就是從 00:00:00 到 23:59:59。
具體程式碼操作
基本思路:首先我們需要獲得剩餘時間,接著啟動一個 1 秒的週期性定時器,然後每隔一秒更新一下文案。
直接上程式碼:
//時間格式化,根據總秒數轉換為對應的 hh:mm:ss 格式
String constructTime(int seconds) {
int hour = seconds ~/ 3600;
int minute = seconds % 3600 ~/ 60;
int second = seconds % 60;
return formatTime(hour) + ":" + formatTime(minute) + ":" + formatTime(second);
}
//數字格式化,將 0~9 的時間轉換為 00~09
String formatTime(int timeNum) {
return timeNum < 10 ? "0" + timeNum.toString() : timeNum.toString();
}
//獲取當期時間
var now = DateTime.now();
//獲取 2 分鐘的時間間隔
var twoHours = now.add(Duration(minutes: 2)).difference(now);
//獲取總秒數,2 分鐘為 120 秒
var seconds = twoHours.inSeconds;
//設定 1 秒回撥一次
const period = const Duration(seconds: 1);
//列印一開始的時間格式,為 00:02:00
print(constructTime(seconds));
Timer.periodic(period, (timer) {
//秒數減一,因為一秒回撥一次
seconds--;
//列印減一後的時間
print(constructTime(seconds));
if (seconds == 0) {
//倒計時秒數為0,取消定時器
timer.cancel();
timer = null;
}
});
其實註釋也寫的很清楚了,就是基本思路的基礎上增加了一些細節處理,這裡演示是自己構造了一個兩分鐘的倒計時。
好了,基本到這裡已經說完了,但是可能 Flutter 具體一些細節還不一樣,這邊直接給下一個倒計時的完整程式碼吧。
import 'dart:async';
import 'package:flutter/material.dart';
class Countdown extends StatefulWidget {
@override
_CountdownState createState() => _CountdownState();
}
class _CountdownState extends State<Countdown> {
Timer _timer;
int seconds;
@override
Widget build(BuildContext context) {
return Center(
child: Text(constructTime(seconds)),
);
}
//時間格式化,根據總秒數轉換為對應的 hh:mm:ss 格式
String constructTime(int seconds) {
int hour = seconds ~/ 3600;
int minute = seconds % 3600 ~/ 60;
int second = seconds % 60;
return formatTime(hour) + ":" + formatTime(minute) + ":" + formatTime(second);
}
//數字格式化,將 0~9 的時間轉換為 00~09
String formatTime(int timeNum) {
return timeNum < 10 ? "0" + timeNum.toString() : timeNum.toString();
}
@override
void initState() {
super.initState();
//獲取當期時間
var now = DateTime.now();
//獲取 2 分鐘的時間間隔
var twoHours = now.add(Duration(minutes: 2)).difference(now);
//獲取總秒數,2 分鐘為 120 秒
seconds = twoHours.inSeconds;
startTimer();
}
void startTimer() {
//設定 1 秒回撥一次
const period = const Duration(seconds: 1);
_timer = Timer.periodic(period, (timer) {
//更新介面
setState(() {
//秒數減一,因為一秒回撥一次
seconds--;
});
if (seconds == 0) {
//倒計時秒數為0,取消定時器
cancelTimer();
}
});
}
void cancelTimer() {
if (_timer != null) {
_timer.cancel();
_timer = null;
}
}
@override
void dispose() {
super.dispose();
cancelTimer();
}
}
效果如下:
後續打算寫一個 FlutterApp 涵蓋我之前部落格的例子,方便大家結合程式碼檢視實際執行效果,敬請期待。
這邊之前建立了一個知識星球,歡迎網際網路小夥伴加入,一起學習,共同成長。
連結方式加入:
我正在「Flutter(限免)」和朋友們討論有趣的話題,你一起來吧?
https://t.zsxq.com/MVrJiAY
掃碼方式加入:
相關推薦
Flutter 快速上手定時器/倒計時及實戰講解
本文微信公眾號「AndroidTraveler」首發。 今天給大家講講 Flutter 裡面定時器/倒計時的實現。 一般有兩種場景: 我只需要你在指定時間結束後回撥告訴我。回撥只需要一次。 我需要你在指定時間結束後回撥告訴我。回撥可能多次。 下面針對這兩種場景,我們來說下如何在 Flutter 裡面使用。
C#.NET定時器類及使用方法
C#.NET 定時器類及使用方法 在.net常用的定時器類有下面三種,使用定時器時需要設定引數,如間斷時間、定時器計溢位後的回撥函式、延時、開始等,定時器的的主要方法有開始、終止等,不同的定時器實現上述的方法會有一些差異,本文會針對具體的定時
javascript定時器倒計時自定義時間迴圈
html> head , body...此處省略。。 <div class="TitAlis clearfloat"> <h3>健康團 <span class="hotDp"><a class="fon
Hystrix-短路器原理及實戰
短路器是什麼?顧名思義,短路器的作用是用來阻斷的。即當開啟短路器時,後續對command的執行會直接執行fallback降級。那麼什麼情況下短路器會被開啟呢?下面我們一起了解下這其中的原理。 一、短路器的工作原理 1、短路器開啟的前提是經過短路器的流量超過了一定的閾值。比如說在10s內,
VC/MFC 定時器設定及OnTimer使用
SetTimer(2,1000,NULL); //ID為2,定時1000ms SetTimer(3,500,NULL); //ID為3,定時500ms WINDOWS會協調他們的。當然OnTimer函式體也要發生變化,要在函式體內新增每一個timer的處理程式碼: OnTimer(nID
Windows下的高精度定時器實現及精確時刻獲取
通訊、VOIP、視訊等領域的很多核心技術對時間精度的要求非常高,比如資料採集、時間同步、媒體流平滑控制、擁塞演算法等等,很多技術都是以毫秒為單位來進行計算和控制的。但是Windows設計之初並不是以實時系統為目標的,所以Windows系統的時間精度一直不高,實際最小單位是1
帶動畫效果的圓形進度條顯示定時器倒計時
在實際專案開發中我們經常要使用進度條監聽下載進度,使用的大多是在UIView中的- (void)drawRect:(CGRect)rect方法中描繪圓形路徑,然後通過傳過來的進度值計算圓形路徑百分比達到監聽效果,這種監聽進度方法適合檔案下載,但是我們開發中有時會
linux核心定時器使用及原理
轉自:https://wenku.baidu.com/view/cab7028fcc22bcd126ff0c58.html Linux定時器的使用 核心定時器是核心用來控制在未來某個時間點(基於jiffies)排程執行某個函式的一種機制,其實現位於 <linux/t
Spring定時器配置及使用
spring中集成了定時器功能,使用到了類:org.springframework.scheduling.quartz.SchedulerFactoryBean,org.springframework.scheduling.quartz.CronTriggerBean, o
使用者定時器SetTimer及Windows訊息的傳遞處理
#include <windows.h> #include <stdio.h> #include <conio.h> int coun
STM32 F4 (8) Systick滴答定時器-延時函式講解 QQ群 860099671
SysTick定時器適用所有的STM32開發板,這節課講解SysTick定時器產生的 延時函式,STM32開發指南5.1小節有有關SysTick相關的 介紹,在程式中在delay資料夾中,SysTick定時器是核心級別的,這個定時器很簡單,主要用來延時和用作實時系統裡面的心
多線程中sleep和wait的區別,以及多線程的實現方式及原因,定時器--Timer
守護 驗證 取消 技術 方法 代碼 安全 接口 art 1. Java中sleep和wait的區別 ① 這兩個方法來自不同的類分別是,sleep來自Thread類,和wait來自Object類。 sleep是Thread的靜態類方法,誰調用的誰去睡覺,即使在a線程裏調用b
Laravel入門及實踐,快速上手社交系統ThinkSNS+二次開發
title 瀏覽器 extend 成了 migration 如果 編寫 三種 views 【摘要】自從社交系統ThinkSNS+不使用ThinkPHP框架而使用Laravel框架之後,很多人都說技術門檻擡高了,其實你與TS+的距離僅僅只是學習一個新框架而已,所以,我們今天來
第34天:日期函數、定時器、倒計時
spl inner function nth 設置 gin dem 案例 支持 一、日期函數(Date())設置本地日期:年月日時分秒1、聲明日期var date=new Date();//創建一個新的日期函數2、使用函數date.getTime();//提倡使用,date
(5)Spring WebFlux快速上手——響應式Spring的道法術器
響應式編程 Spring WebFlux 本系列文章索引《響應式Spring的道法術器》前情提要 lambda與函數式 | Reactor 3快速上手本文源碼 1.3.3 Spring WebFlux Spring WebFlux是隨Spring 5推出的響應式Web框架。 1)服務端技術棧 Sp
響應式Spring的道法術器(Spring WebFlux 快速上手 + 全面介紹)
Spring WebFlux 響應式編程 Spring 5 1. Spring WebFlux 2小時快速入門 Spring 5 之使用Spring WebFlux開發響應式應用。 lambda與函數式(15min) Reactor 3 響應式編程庫(60min) Spring Webflux和
Go語言中時間函數及定時器的使用
Go語言時間函數 Go語言定時器 Go語言中時間函數及定時器、休眠等功能的實現和使用,代碼如下,有需要的小夥伴直接拿去 package main import ( "time" "fmt" ) func main() { // 設置時區,如果name是""或"UTC",返回
SpringBoot知識體系實戰-定時器篇
之前 假設 schedule 取數據 rep 文件中 nag mark fc7 實戰前言:定時任務我想諸位童鞋都不陌生,簡而言之名為“設定定時鬧鐘做某件事情”,在這裏我將以訂單模塊作為實戰為例! 需求分析:在企業級應用中,經常打交道的業務應當屬於訂單模塊了,下面將基於這樣的
spring框架中定時器的配置及應用
首先我們來簡單瞭解下定時器: 1. 定時器的作用 在實際的開發中,如果專案中需要定時執行或者需要重複執行一定的工作,定時器
【SSH網上商城專案實戰15】執行緒、定時器同步首頁資料(類似於部落格定期更新排名)
轉自:https://blog.csdn.net/eson_15/article/details/51387378 上一節我們做完了首頁UI介面,但是有個問題:如果我在後臺添加了一個商品,那麼我必須重啟一下伺服器才能重新同步後臺資料,然後重新整理首頁才能同步資