Flutter实现倒计时功能

简介: 在Flutter开发中,可通过Timer的periodic函数开启一个循环执行的任务

题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天。

Header1 Header2
CSDN 网易云课堂教程
掘金 EDU学院教程
知乎 Flutter系列文章

本文是异步编程的定时器策略篇章,通过Timer来实现。
定时器的使用场景一般如下

  • 间隔一定的时间循环发起查询
  • 倒计时

通过Timer实现间隔一定时间的循环执行

Timer的periodic函数开启一个循环执行的任务,其参数一用来配制间隔执行这个任务的时间,参数二用来配置具体执行的任务,在使用时需要注意有创建就要有销毁,以避免内存泄漏,如开启一个间隔1秒的定时任务,如下代码清单1-1所示:

class _FutureLoopTestPageState extends State {
  ///声明变量
  Timer _timer;

  @override
  void initState() {
    super.initState();

    ///循环执行
    ///间隔1秒
    _timer = Timer.periodic(Duration(milliseconds: 1000), (timer) {
      ///定时任务
    });
  }

  @override
  void dispose() {
    ///取消计时器
    _timer.cancel();
    super.dispose();
  }
  ...
}

实现一个APP启动页面的倒计时

如下图所示为常见App的一个启动页面的倒计时显示效果,对应代码清单 1-3.
在这里插入图片描述
对应的实现代码如下:

///代码清单 1-3 实现一个倒计时
class FutureLoopTestPage2 extends StatefulWidget {
  @override
  _FutureLoopTestPageState createState() => _FutureLoopTestPageState();
}

//lib/code/main_data.dart
class _FutureLoopTestPageState extends State<FutureLoopTestPage2> {
  ///声明变量
  Timer _timer;
  ///记录当前的时间
  int curentTimer = 0;

  @override
  void initState() {
    super.initState();

    ///循环执行
    ///间隔1秒
    _timer = Timer.periodic(Duration(milliseconds: 1000), (timer) {
      ///自增
      curentTimer++;
      ///到5秒后停止 
      if (curentTimer == 5) {
        _timer.cancel();
      }
      setState(() {});
    });
  }

  @override
  void dispose() {
    ///取消计时器
    _timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("倒计时"),
      ),
      backgroundColor: Colors.white,

      ///填充布局
      body: Container(
          padding: EdgeInsets.all(20),
          width: double.infinity,
          height: double.infinity,
          child: Column(
            children: [
              ///层叠布局将进度与文字叠在一起
              Stack(
                ///子Widget居中
                alignment: Alignment.center,
                children: [
                  ///圆形进度
                  CircularProgressIndicator(
                    ///当前指示的进度 0.0 -1.0
                    value: curentTimer / 5,
                  ),
                  ///显示的文本
                  Text("${5-curentTimer}"),
                ],
              )
            ],
          )),
    );
  }
}

在上述代码清单 1-3 中所示的效果,圆形进度执行的有点死板的效果,如下图所示为优化后的效果,给人的视觉效果比较舒适,对应代码清单1-4。
在这里插入图片描述

///代码清单 1-4 
class FutureLoopTestPage3 extends StatefulWidget {
  @override
  _FutureLoopTestPageState createState() => _FutureLoopTestPageState();
}

//lib/code/main_data.dart
class _FutureLoopTestPageState extends State<FutureLoopTestPage3> {
  ///声明变量
  Timer _timer;
  ///记录当前的时间
  int curentTimer = 0;

  @override
  void initState() {
    super.initState();

    ///循环执行
    ///间隔1秒
    _timer = Timer.periodic(Duration(milliseconds: 100), (timer) {
      ///自增
      curentTimer+=100;
      ///到5秒后停止
      if (curentTimer >= 5000) {
        _timer.cancel();
      }
      setState(() {});
    });
  }

  @override
  void dispose() {
    ///取消计时器
    _timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("倒计时"),
      ),
      backgroundColor: Colors.white,

      ///填充布局
      body: Container(
          padding: EdgeInsets.all(20),
          width: double.infinity,
          height: double.infinity,
          child: Column(
            children: [
              ///层叠布局将进度与文字叠在一起
              Stack(
                ///子Widget居中
                alignment: Alignment.center,
                children: [
                  ///圆形进度
                  CircularProgressIndicator(
                    ///当前指示的进度 0.0 -1.0
                    value: curentTimer / 5000,
                  ),
                  ///显示的文本
                  Text("${(curentTimer/1000).toInt()}"),
                ],
              )
            ],
          )),
    );
  }
}

代码清单 1-3 与代码 清单1-4中所示的效果有完全不同的视觉效果,在代码实现的方式上只是刷新频率的不一样。


完毕
公众号 我的大前端生涯

相关文章
|
3月前
|
iOS开发 UED
Flutter 动态修改应用图标功能指南
探索Flutter中动态应用图标的实现方法,了解如何为用户提供独特体验,促进用户升级和应用内购买。
155 0
Flutter 动态修改应用图标功能指南
|
JSON Dart IDE
Flutter实现国际化
开发一个App,如果我们的App需要面向不同的语种(比如中文、英文、繁体等),那么我们需要对齐进行国际化开发
1170 0
Flutter实现国际化
|
3月前
|
移动开发 JavaScript 前端开发
【Uniapp 专栏】Uniapp 与 Flutter 的功能特点对比
【5月更文挑战第15天】Uniapp 和 Flutter 是跨平台开发的热门框架。Uniapp 以其强大的跨平台兼容性和基于 Vue.js 的易学性著称,适合快速开发适用于 iOS、Android 和 H5 的应用。其丰富的组件生态简化了功能集成。然而,在复杂场景下,性能可能不及原生。Flutter 则以其全新渲染引擎实现流畅界面和高度自定义,性能接近原生,但学习成本较高,需处理特定平台适配。适用于高要求的项目。两者各有优势,选择应考虑项目需求、技术储备和开发周期。
540 1
【Uniapp 专栏】Uniapp 与 Flutter 的功能特点对比
|
2月前
|
Dart 监控 开发者
详细介绍Flutter Profiler的功能、使用方法以及如何利用它来提升应用的性能
【6月更文挑战第11天】Flutter Profiler是用于优化Flutter应用的关键工具,提供CPU、GPU、内存和网络分析。它帮助开发者监控运行时性能,识别瓶颈,如CPU过度使用、渲染问题、内存泄漏和网络效率低。通过选择分析类型、开始分析、查看结果,开发者可进行针对性优化。最佳实践包括定期分析、结合实际场景、关注关键指标及结合其他工具。有效利用Profiler能提升应用性能和用户体验。
70 2
|
2月前
|
开发框架 开发者 UED
Flutter作为一款跨平台的移动应用开发框架,自然也提供了丰富的工具和功能来支持可访问性和无障碍设计
【6月更文挑战第11天】Flutter是一款注重可访问性设计的跨平台移动应用开发框架,提供语义化组件、文本缩放、对比度调整、动态内容更新通知和键盘导航等功能,支持无障碍体验。开发者应结合简化操作、清晰反馈、多输入方式支持及测试优化等原则,以创建包容性更强的应用,满足不同用户需求,体现社会责任。
39 1
|
2月前
|
开发框架 Dart JavaScript
深入探讨Flutter中的Web支持功能,以及如何利用Flutter构建跨平台Web应用的最佳实践
【6月更文挑战第11天】Flutter,Google的开源跨平台框架,已延伸至Web支持,让开发者能用同一代码库构建移动和Web应用。Flutter Web基于Dart转JavaScript,利用WebAssembly和JavaScript在Web上运行。构建Web应用最佳实践包括选择合适项目、优化性能、进行兼容性测试和利用Flutter的声明式UI、热重载等优势。尽管性能挑战存在,Flutter Web为跨平台开发提供了更多机会和潜力。
65 1
|
1月前
|
缓存 容器
Flutter实现仿微信群头像功能
Flutter实现仿微信群头像功能
29 0
|
11月前
|
存储 缓存 安全
Flutter:类功能索引(全)
本文以表描述形式收录了Flutter中提供的各个类,旨在方便地进行查询相关组件。
221 2
|
10月前
|
API 开发者 索引
Flutter笔记:发布一个多功能轮播组件 awesome_carousel
awesome_carousel 模块是一个Flutter轮播图模块。可以实现包括自定义指示器、动画、滚动等等众多功能。能够指定相当多地细节(可以参考 API 部分了解)本文给出 awesome_carousel 模块的两个简单的用法示例。
199 0
Flutter的手势识别功能实现GestureDetector
Flutter的手势识别功能实现GestureDetector