Flutter实现倒计时功能

 更新时间:2022年03月23日 17:33:36   作者:u010186280  
这篇文章主要为大家详细介绍了Flutter实现倒计时功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Flutter实现倒计时功能的具体代码,供大家参考,具体内容如下

有一个需求,需要在页面进行显示倒计时,倒计时结束后,做相应的逻辑处理。

实现思路:在Flutter中,Timer.periodic提供了循环功能,查看函数定义:

factory Timer.periodic(Duration duration, void callback(Timer timer))

第一个参数就是时间间隔,第二个参数就是事件处理回调。

由于后台返回的是秒数,所以需要根据总秒数计算小时,分钟,秒。同时,当不满一个小时时,只显示分钟和秒数,当分钟和秒数只有一个数时(比如1分8秒,显示为01:08)前面加“0”处理。

完整代码:

import 'package:flutter/material.dart';
import 'dart:async';

class CounterDownPage extends StatefulWidget {
  @override
  _CounterDownPageState createState() => _CounterDownPageState();
}

class _CounterDownPageState extends State<CounterDownPage> {
  // 用来在布局中显示相应的剩余时间
  String remainTimeStr = '';
  Timer _timer;

   //倒计时 
  void startCountDown(int time) {
    // 重新计时的时候要把之前的清除掉
    if (_timer != null) {
      if (_timer.isActive) {
        _timer.cancel();
        _timer = null;
      }
    }

    if (time <= 0) {
      return;
    }

    var countTime = time;
    const repeatPeriod = const Duration(seconds: 1);
    _timer = Timer.periodic(repeatPeriod, (timer) { 
      if (countTime <= 0) {
        timer.cancel();
        timer = null;
        //待付款倒计时结束,可以在这里做相应的操作
        
        return;
      }
      countTime--;

    //外面传进来的单位是秒,所以需要根据总秒数,计算小时,分钟,秒
    int hour = (countTime ~/ 3600) % 24;
    int minute = countTime % 3600 ~/60;
    int second = countTime % 60;

    var str = '';
    if (hour > 0) {
      str = str + hour.toString()+':';
    }

    if (minute / 10 < 1) {//当只有个位数时,给前面加“0”,实现效果:“:01”,":02"
      str = str + '0' + minute.toString() + ":";
    } else {
      str = str + minute.toString() + ":";
    }

    if (second / 10 < 1) {
      str = str + '0' + second.toString();
    } else {
      str = str + second.toString();
    }

    setState(() {
      remainTimeStr = str;
    });

    });
  }

 @override
  void initState() {
    super.initState();
    //开始倒计时,这里传入的是秒数
     startCountDown(5000);
  }

@override
  void dispose() {
    super.dispose();
    if (_timer != null) {
      if (_timer.isActive) {
        _timer.cancel();
        _timer = null;
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("倒计时"),
      ),
      body: Center(
        child: Row(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
         Text("剩余", style: TextStyle(
           fontSize: 18,
           color: Color.fromRGBO(255, 111, 50, 1),
           fontWeight: FontWeight.bold
         ),),
          Text(remainTimeStr.length > 0 ? remainTimeStr: "--", style: TextStyle(
           fontSize: 18,
           color: Color.fromRGBO(255, 111, 50, 1),
           fontWeight: FontWeight.bold
         ),),
       ],
      ),
      ),
    );
  }
}

效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Android开发之ProgressDialog进度对话框用法示例

    Android开发之ProgressDialog进度对话框用法示例

    这篇文章主要介绍了Android开发之ProgressDialog进度对话框用法,简单介绍了ProgressDialog进度对话框常见函数功能,并结合实例形式分析了ProgressDialog组件创建及使用进度对话框相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • Android编程连接MongoDB及增删改查等基本操作示例

    Android编程连接MongoDB及增删改查等基本操作示例

    这篇文章主要介绍了Android编程连接MongoDB及增删改查等基本操作,简单介绍了MongoDB功能、概念、使用方法及Android操作MongoDB数据库的基本技巧,需要的朋友可以参考下
    2017-07-07
  • Android实现手势滑动和简单动画效果

    Android实现手势滑动和简单动画效果

    这篇文章主要为大家详细介绍了Android实现手势滑动和简单动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 详解Android Bitmap的常用压缩方式

    详解Android Bitmap的常用压缩方式

    这篇文章主要介绍了详解Android Bitmap的常用压缩方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Android端内数据状态同步方案VM-Mapping详解

    Android端内数据状态同步方案VM-Mapping详解

    这篇文章主要介绍了Android端内数据状态同步方案VM-Mapping详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • Android实现TCP断点上传 后台C#服务接收

    Android实现TCP断点上传 后台C#服务接收

    这篇文章主要为大家详细介绍了Android实现TCP断点上传,后台C#服务实现接收,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • Android ListView数据的分批显示功能

    Android ListView数据的分批显示功能

    本文通过实例代码给大家分享了Android ListView数据的分批显示功能,非常不错具有参考借鉴价值,需要的朋友参考下吧
    2017-04-04
  • 详解Android中Room组件的使用

    详解Android中Room组件的使用

    Room 是在 SQLite 上提供了一个抽象层,以便在充分利用 SQLite 的强大功能的同时,能够流畅地访问数据库,这篇文章主要为大家介绍了Room组件的具体使用,需要的可以参考下
    2023-08-08
  • Android获取经纬度计算距离介绍

    Android获取经纬度计算距离介绍

    Android提供LocationManager和Location,可以方便的获得经纬度、海拔等位置。使用LocationManager来获得位置管理类,从而可以获得历史GPS信息以及位置变化的监听注册;使用Location来获得具体的位置信息
    2014-01-01
  • Flutter 仿微信支付界面

    Flutter 仿微信支付界面

    网传微信支付页面的第三方链接一个格子需要广告费1一个亿,微信支付页非常适合做功能导航,本篇使用 ListView和 GridView 模仿了微信支付的页面,同时介绍了如何装饰一个组件的背景和边缘样式。
    2021-05-05

最新评论