快捷導(dǎo)航

Flutter定時(shí)器、倒計(jì)時(shí)的快速上手及實(shí)戰(zhàn)講解

更新時(shí)間：2019年06月10日 11:01:47 作者：AndroidTraveler

這篇文章主要給大家介紹了關(guān)于Flutter定時(shí)器、倒計(jì)時(shí)的快速上手及實(shí)戰(zhàn)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Flutter具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

今天給大家講講 Flutter 里面定時(shí)器/倒計(jì)時(shí)的實(shí)現(xiàn)。

一般有兩種場(chǎng)景：

我只需要你在指定時(shí)間結(jié)束后回調(diào)告訴我。回調(diào)只需要一次。
我需要你在指定時(shí)間結(jié)束后回調(diào)告訴我?；卣{(diào)可能多次。

下面針對(duì)這兩種場(chǎng)景，我們來(lái)說(shuō)下如何在 Flutter 里面使用。

回調(diào)一次的定時(shí)器

const timeout = const Duration(seconds: 5);
print('currentTime='+DateTime.now().toString());
Timer(timeout, () {
 //到時(shí)回調(diào)
 print('afterTimer='+DateTime.now().toString());
});

這里我們?cè)O(shè)置了超時(shí)時(shí)間為 5 秒。然后啟動(dòng)一個(gè)定時(shí)器，等到 5 秒時(shí)候到了，就會(huì)執(zhí)行回調(diào)方法。

我們?cè)诙〞r(shí)器啟動(dòng)之前和之后都加上了打印日志，控制臺(tái)打印輸出如下：

flutter: currentTime=2019-06-08 13:56:35.347493
flutter: afterTimer=2019-06-08 13:56:40.350412

用法總結(jié)起來(lái)就是：

1.設(shè)置超時(shí)時(shí)間 timeout

2.啟動(dòng)定時(shí)器 Timer(timeout, callback)

3.處理回調(diào) callback

回調(diào)多次的定時(shí)器

回調(diào)多次的定時(shí)器用法和回調(diào)一次的差不多，區(qū)別有下面兩點(diǎn)：

API 調(diào)用不同
需要手動(dòng)取消，否則會(huì)一直回調(diào)，因?yàn)槭侵芷谛缘?/li>

一樣的我們通過(guò)一個(gè)簡(jiǎn)單的小例子來(lái)說(shuō)明：

int count = 0;
const period = const Duration(seconds: 1);
print('currentTime='+DateTime.now().toString());
Timer.periodic(period, (timer) {
 //到時(shí)回調(diào)
 print('afterTimer='+DateTime.now().toString());
 count++;
 if (count >= 5) {
  //取消定時(shí)器，避免無(wú)限回調(diào)
  timer.cancel();
  timer = null;
 }
});

這里我們的功能是每秒回調(diào)一次，當(dāng)達(dá)到 5 秒后取消定時(shí)器，一共回調(diào)了 5 次。

控制臺(tái)輸出如下：

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

用法總結(jié)起來(lái)就是：

1.設(shè)置周期回調(diào)時(shí)間 period

2.啟動(dòng)定時(shí)器 Timer.periodic(period, callback(timer))

3.處理回調(diào) callback(timer)

4.記得在合適時(shí)機(jī)取消定時(shí)器，否則會(huì)一直回調(diào)

好了，有了上面的知識(shí)儲(chǔ)備，接下來(lái)，讓我們進(jìn)入實(shí)戰(zhàn)講解環(huán)節(jié)。

實(shí)戰(zhàn)講解

業(yè)務(wù)場(chǎng)景

服務(wù)器返回一個(gè)時(shí)間，你根據(jù)服務(wù)器的時(shí)間和當(dāng)前時(shí)間的對(duì)比，顯示倒計(jì)時(shí)，倒計(jì)時(shí)的時(shí)間在一天之內(nèi)，超過(guò)一天顯示默認(rèn)文案即可。

場(chǎng)景分析

這個(gè)業(yè)務(wù)場(chǎng)景在倒計(jì)時(shí)這一塊就需要使用到我們上面的知識(shí)了。由于限定了倒計(jì)時(shí)是在一天之內(nèi)，所以顯示的文案就是從 00:00:00 到 23:59:59。

具體代碼操作

基本思路：首先我們需要獲得剩余時(shí)間，接著啟動(dòng)一個(gè) 1 秒的周期性定時(shí)器，然后每隔一秒更新一下文案。

直接上代碼：

//時(shí)間格式化，根據(jù)總秒數(shù)轉(zhuǎn)換為對(duì)應(yīng)的 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);
}

//數(shù)字格式化，將 0~9 的時(shí)間轉(zhuǎn)換為 00~09
String formatTime(int timeNum) {
 return timeNum < 10 ? "0" + timeNum.toString() : timeNum.toString();
}

//獲取當(dāng)期時(shí)間
var now = DateTime.now();
//獲取 2 分鐘的時(shí)間間隔
var twoHours = now.add(Duration(minutes: 2)).difference(now);
//獲取總秒數(shù)，2 分鐘為 120 秒
var seconds = twoHours.inSeconds;
//設(shè)置 1 秒回調(diào)一次
const period = const Duration(seconds: 1);
//打印一開始的時(shí)間格式，為 00:02:00
print(constructTime(seconds));
Timer.periodic(period, (timer) {
 //秒數(shù)減一，因?yàn)橐幻牖卣{(diào)一次
 seconds--;
 //打印減一后的時(shí)間
 print(constructTime(seconds));
 if (seconds == 0) {
  //倒計(jì)時(shí)秒數(shù)為0，取消定時(shí)器
  timer.cancel();
  timer = null;
 }
});

其實(shí)注釋也寫的很清楚了，就是基本思路的基礎(chǔ)上增加了一些細(xì)節(jié)處理，這里演示是自己構(gòu)造了一個(gè)兩分鐘的倒計(jì)時(shí)。

好了，基本到這里已經(jīng)說(shuō)完了，但是可能 Flutter 具體一些細(xì)節(jié)還不一樣，這邊直接給下一個(gè)倒計(jì)時(shí)的完整代碼吧。

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)),
  );
 }

 //時(shí)間格式化，根據(jù)總秒數(shù)轉(zhuǎn)換為對(duì)應(yīng)的 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);
 }

 //數(shù)字格式化，將 0~9 的時(shí)間轉(zhuǎn)換為 00~09
 String formatTime(int timeNum) {
  return timeNum < 10 ? "0" + timeNum.toString() : timeNum.toString();
 }

 @override
 void initState() {
  super.initState();
  //獲取當(dāng)期時(shí)間
  var now = DateTime.now();
  //獲取 2 分鐘的時(shí)間間隔
  var twoHours = now.add(Duration(minutes: 2)).difference(now);
  //獲取總秒數(shù)，2 分鐘為 120 秒
  seconds = twoHours.inSeconds;
  startTimer();
 }

 void startTimer() {
  //設(shè)置 1 秒回調(diào)一次
  const period = const Duration(seconds: 1);
  _timer = Timer.periodic(period, (timer) {
   //更新界面
   setState(() {
    //秒數(shù)減一，因?yàn)橐幻牖卣{(diào)一次
    seconds--;
   });
   if (seconds == 0) {
    //倒計(jì)時(shí)秒數(shù)為0，取消定時(shí)器
    cancelTimer();
   }
  });
 }

 void cancelTimer() {
  if (_timer != null) {
   _timer.cancel();
   _timer = null;
  }
 }

 @override
 void dispose() {
  super.dispose();
  cancelTimer();
 }
}

效果如下：