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

总结

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

Flutter定时器、倒计时的快速上手及实战讲解的更多相关文章

  1. swift 定时器的使用

    参考:http://www.cnblogs.com/sxlfybb/p/3792611.htmlNSTimer有2个构造函数注意到,注释为未继承,所以两个构造不能用NSTimer有2个静态实例在swift中,找不到NSInvocation类,日了狗了还好有另一种使用静态函数的形式去实例化:

  2. Swift - 时间控制器NSTimer每隔一定时间执行某个函数

  3. Swift/OC计时器使用方法

    .invalidate();timer=nil;}

  4. swift3.0 Timer 定时器

    贡献者:赵大财博客:https://my.oschina.net/zhaodacaiGitHub:https://github.com/zhaodacai邮箱:zhaodacai@yeah.comQQ:327532817=============================

  5. 在Swift中使用NSTimer

    在这种情况下,timerFunc()从未被调用。您可以创建一个自动将自己添加到runloop并开始启动的计划定时器:或者,你可以保留你当前的代码,并添加定时器runloop当你准备好了:

  6. Flutter中文教程-Cookbook

    Flutter中文网的Cookbook中包含了在编写Flutter应用程序时常见问题及示例。设计基础使用主题共享颜色和字体样式Images显示来自网上的图片用占位符淡入图片使用缓存图Lists创建一个基本list创建一个水平list使用长列表创建不同类型子项的List创建一个gridList处理手势处理点击添加Material触摸水波效果实现滑动关闭导航导航到新页面并返回给新页面传值从新页面返回数据给上一个页面网络从网上获取数据进行认证请求使用WebSockets

  7. android-studio – 未配置Dart SDK

    Initializinggradle…

  8. 安卓 – 从一个扑动的应用程序拨打电话

    或者有更好的选择从我的应用程序拨打电话?

  9. android – 如何在Flutter中添加Webview?

    我知道可以将WebView添加为整页,但找不到任何示例代码.我假设你可以使用PageView作为它的基础,但不知道如何调用本机androidWebView并将其添加到PageView.谁能指出我正确的方向?

  10. android – 如何将消息从Flutter传递给Native?

    如果需要与特定的API/硬件组件进行交互,您如何将Flutter的信息传递回Android/Native代码?是否有任何事件频道可以通过其他方式发送信息或类似于回调?

随机推荐

  1. Flutter 网络请求框架封装详解

    这篇文章主要介绍了Flutter 网络请求框架封装详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. Android单选按钮RadioButton的使用详解

    今天小编就为大家分享一篇关于Android单选按钮RadioButton的使用详解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

  3. 解决android studio 打包发现generate signed apk 消失不见问题

    这篇文章主要介绍了解决android studio 打包发现generate signed apk 消失不见问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  4. Android 实现自定义圆形listview功能的实例代码

    这篇文章主要介绍了Android 实现自定义圆形listview功能的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. 详解Android studio 动态fragment的用法

    这篇文章主要介绍了Android studio 动态fragment的用法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. Android用RecyclerView实现图标拖拽排序以及增删管理

    这篇文章主要介绍了Android用RecyclerView实现图标拖拽排序以及增删管理的方法,帮助大家更好的理解和学习使用Android,感兴趣的朋友可以了解下

  7. Android notifyDataSetChanged() 动态更新ListView案例详解

    这篇文章主要介绍了Android notifyDataSetChanged() 动态更新ListView案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下

  8. Android自定义View实现弹幕效果

    这篇文章主要为大家详细介绍了Android自定义View实现弹幕效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. Android自定义View实现跟随手指移动

    这篇文章主要为大家详细介绍了Android自定义View实现跟随手指移动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. Android实现多点触摸操作

    这篇文章主要介绍了Android实现多点触摸操作,实现图片的放大、缩小和旋转等处理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

返回
顶部