Flutter定时器、倒计时的快速上手及实战讲解

今天给大家讲讲 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 涵盖我之前博客的例子，方便大家结合代码查看实际运行效果，敬请期待。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。