广告
返回顶部
首页 > 资讯 > 移动开发 >Flutter实现倒计时功能
  • 826
分享到

Flutter实现倒计时功能

2024-04-02 19:04:59 826人浏览 独家记忆
摘要

本文实例为大家分享了Flutter实现倒计时功能的具体代码,供大家参考,具体内容如下 有一个需求,需要在页面进行显示倒计时,倒计时结束后,做相应的逻辑处理。 实现思路:在Flutte

本文实例为大家分享了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
         ),),
       ],
      ),
      ),
    );
  }
}

效果:

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

--结束END--

本文标题: Flutter实现倒计时功能

本文链接: https://www.lsjlt.com/news/143508.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Flutter实现倒计时功能
    本文实例为大家分享了Flutter实现倒计时功能的具体代码,供大家参考,具体内容如下 有一个需求,需要在页面进行显示倒计时,倒计时结束后,做相应的逻辑处理。 实现思路:在Flutte...
    99+
    2022-11-13
  • Handler实现倒计时功能
    本文实例为大家分享了Handler实现倒计时功能的具体代码,供大家参考,具体内容如下 1、需求 1.1 实现目标 当后台传递一个时间戳时,与当前系统时间做时间差,并转换为时分秒,作为...
    99+
    2022-11-12
  • vue实现倒计时功能
    本文实例为大家分享了vue实现倒计时功能的具体代码,供大家参考,具体内容如下 通过父组件传入的结束时间减去当前日期得到剩余时间 1.子组件部分 <div class="it...
    99+
    2022-11-11
  • vue实现时间倒计时功能
    本文实例为大家分享了vue实现时间倒计时功能的具体代码,供大家参考,具体内容如下 需求: 做一个剩余支付时间倒计时的效果 效果图: 代码: <template> ...
    99+
    2022-11-12
  • Android实现时间倒计时功能
    本文实例为大家分享了Android实现时间倒计时功能展示的具体代码,供大家参考,具体内容如下效果展示MainActivity(主页面代码)public class MainActivity extends Activity { priva...
    99+
    2023-05-30
    android 倒计时 roi
  • Vue实现倒计时小功能
    很多项目中都需要实现倒计时功能,例:发送验证码。现在举例实现一个简单的倒计时按钮功能。简单布局,简单操作,简单效果,最主要的是思路和倒计时步骤理解!!! 例、代码如下: 要求:点击提...
    99+
    2022-11-12
  • flutter实现倒计时加载页面
    本文实例为大家分享了flutter实现倒计时加载页面的具体代码,供大家参考,具体内容如下 效果图 实现步骤 1、pubspec.yaml中添加依赖 flustars,该包的Time...
    99+
    2022-11-13
  • Android 简单实现倒计时功能
    在 Android 中倒计时功能是比较常用的一个功能,比如短信验证码,付款倒计时等。实现方式有Handler、Thread 等,但是实现起来都有点麻烦,其实Android已经为...
    99+
    2022-06-06
    倒计时 Android
  • Android实现订单倒计时功能
    先上效果图 1.activity_main.xml <?xml version="1.0" encoding="utf-8"?> <R...
    99+
    2022-06-06
    倒计时 Android
  • android实现倒计时功能代码
    效果图,每隔1秒,变换一下时间  xml: 代码如下: <RelativeLayout xmlns:android="http://schemas.andro...
    99+
    2022-06-06
    倒计时 Android
  • JS怎么实现倒计时功能
    本篇内容主要讲解“JS怎么实现倒计时功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JS怎么实现倒计时功能”吧!HTML代码:<div id=...
    99+
    2022-10-19
  • python实现简单倒计时功能
    使用python实现简单倒计时exe,供大家参考,具体内容如下 使用tkinter制作界面实现倒计时功能。 使用time.sleep(1)实现 秒级 倒计时 使用...
    99+
    2022-11-12
  • React Native 中实现倒计时功能
    目录正文首次实现最终实现示例正文 在 React Native,该如何实现一个倒计时功能呢? 首次实现 表面看来很简单,譬如像下面这样: const timer = useRef&...
    99+
    2022-11-13
    React Native倒计时 React Native
  • Android中CountDownTimer 实现倒计时功能
    CountDownTimerCountDownTimer 是android 自带的一个倒计时类,使用这个类可以很简单的实现 倒计时功能CountDownTimer 的实现方式 new CountDownTimer(6000,100...
    99+
    2023-05-31
    countdowntimer 倒计时 tim
  • Android怎样实现倒计时功能
    这篇文章主要为大家展示了“Android怎样实现倒计时功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Android怎样实现倒计时功能”这篇文章吧。一. 已有倒计时方案存在的问题在开发倒计时功...
    99+
    2023-06-25
  • vue怎么实现时间倒计时功能
    本篇内容介绍了“vue怎么实现时间倒计时功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!需求:做一个剩余支付时间倒计时的效果效果图:代码:...
    99+
    2023-06-20
  • Android倒计时功能的实现代码
    好久没有写博客了,趁着年末,总结了下最近一年所遇到的一些技术问题,还有一些自定义控件,比如倒计时功能 首先倒计时的实现方式 1.Handler 2.Timer 3.RxJava...
    99+
    2022-06-06
    Android
  • Android基于CountDownTimer实现倒计时功能
    本文实例讲述了Android编程基于CountDownTimer实现倒计时功能的方法。分享给大家供大家参考,具体如下: 在逛论坛的时候,看到一个网友提问,说到了CountDow...
    99+
    2022-06-06
    倒计时 Android
  • Android利用Chronometer实现倒计时功能
    项目需要实现一个计时的功能,利用Chronometer虽然可以很方便的实现计时功能,但需要的却是一个倒计时控件。 百度了一下方法不少,倒计时的却没有,于是用Chronomete...
    99+
    2022-06-06
    倒计时 Android
  • android实现倒计时功能的方法
    前言   在打开爱奇艺等app的欢迎界面的时候,右上角有一个倒计时的控件。倒计时完了以后进入主界面。现在我们来实现这个功能。  方法一: 利用...
    99+
    2022-06-06
    倒计时 方法 Android
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作