Flutter天时分秒倒计时

已于 2023-08-12 18:16:55 修改
阅读量2.5k 收藏 2
点赞数 1
文章标签： flutter
于 2021-12-23 17:28:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/androidhyf/article/details/122112560
版权

工具类

class DateCountDownUtil{

  //根据总秒数转换为对应的 hh:mm:ss 格式
  static String constructTime(int seconds) {
    int day = seconds ~/3600 ~/24;
    int hour = seconds ~/ 3600 %24;
    int minute = seconds % 3600 ~/ 60;
    int second = seconds % 60;
    if(day != 0){
      return formatTime(day)+'天'+formatTime(hour) + "小时" + formatTime(minute) + "分" + formatTime(second)+'秒';
    }else if(hour != 0){
      return formatTime(hour) + "小时" + formatTime(minute) + "分" + formatTime(second)+'秒';
    }else if(minute !=0){
      return formatTime(minute) + "分" + formatTime(second)+'秒';
    }else if(second!=0){
      return formatTime(second)+'秒';
    }else {
      return '';
    }

  }

  //数字格式化，将 0~9 的时间转换为 00~09
  static String formatTime(int timeNum) {
    return timeNum < 10 ? "0" + timeNum.toString() : timeNum.toString();
  }
  
 //日期时间差 秒数
  static difference(startTime,endTime){
    return DateTime.parse(startTime).difference(endTime).inSeconds;
  }
}

//日期转时间戳
  static int dateToTimestamp(String date, {isMicroseconds = false}) {
    DateTime dateTime = DateTime.parse(date);
    int timestamp = dateTime.millisecondsSinceEpoch;
    if (isMicroseconds) {
      timestamp = dateTime.microsecondsSinceEpoch;
    }
    return timestamp;
  }

使用

Container(//倒计时显示
            child: WTextView('${DateCountDownUtil.constructTime(widget.info.leftSeconds)}',style: getTextStyle(color: Colors.white,fontSize: ScreenUtil().setSp(32),fontWeight: FontWeight.bold),),
          ),

 _cancelTimer() {//界面销毁时记得取消计时器
    if (_timer != null) {
      _timer.cancel();
      _timer = null;
    }
  }


//需要使用时调用开始倒计时
  _startTimer() {
    //设置 1 秒回调一次
    const period = const Duration(seconds: 1);
    _timer = Timer.periodic(period, (timer) {

      秒数减一，更新界面
      setState(() {
        widget.info.leftSeconds --;
      });
      if (widget.info.leftSeconds == 0) {
        //倒计时秒数为0，取消定时器
        print('我被取消了  ');
        _cancelTimer();
      }
    });
  }

根据日期转倒计时

import 'dart:async';

import 'package:utils/DateCountDownUtil.dart';
import 'package:utils/JadeColors.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
/*
* 交易倒计时
* */
class ComeDown extends StatefulWidget {
  final int type;
  final String endTime;
  const ComeDown({this.endTime, this.type});
  @override
  State<StatefulWidget> createState() {
    return _ComeDownState();
  }
}

class _ComeDownState extends State<ComeDown> {
  Timer timer;
  Widget futureTime = Container();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getTimeData(widget.endTime);
  }

  getTimeData(String endTime) {
    int day;
    int hour;
    int minute;
    int seconds;
    int timeStamp = DateCountDownUtil.dateToTimestamp(endTime);
    DateTime currentEndTime =
    DateTime.fromMillisecondsSinceEpoch(timeStamp);
    timer = Timer.periodic(Duration(seconds: 1), (timer) {
      setState(() {
        day = currentEndTime.difference(DateTime.now()).inDays;
        hour = currentEndTime.difference(DateTime.now()).inHours - day * 24;
        minute = currentEndTime.difference(DateTime.now()).inMinutes -
            day * 24 * 60 -
            hour * 60;
        seconds = currentEndTime.difference(DateTime.now()).inSeconds -
            day * 24 * 60 * 60 -
            hour * 60 * 60 -
            minute * 60;
        futureTime = currentEndTime.difference(DateTime.now()).inSeconds < 0
            ? Text(
          S.current.yijiesu,
          style: TextStyle(
              height: 1,
              fontSize: 28.sp,
              color: JadeColors.grey_2),
        )
            : Row(
          children: [
            getText(day),
            SizedBox(
              width: 3,
            ),
            Text(
              S.current.tianshu,
              style: TextStyle(fontSize: 28.sp, color: JadeColors.grey_2),
            ),
            SizedBox(
              width: 3,
            ),
            getText(hour),
            SizedBox(
              width: 3,
            ),
            Text(
              S.current.xiaoshi,
              style: TextStyle(fontSize: 28.sp, color: JadeColors.grey_2),
            ),
            SizedBox(
              width: 3,
            ),
            getText(minute),
            SizedBox(
              width: 3,
            ),
            Text(
              S.current.fenzhong,
              style: TextStyle(fontSize: 28.sp, color: JadeColors.grey_2),
            ),
            SizedBox(
              width: 3,
            ),
            getText(seconds),
            SizedBox(
              width: 3,
            ),
            Text(
              S.current.miaoshu,
              style: TextStyle(fontSize: 13, color: JadeColors.grey_2),
            )
          ],
        );
      });
    });
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    timer.cancel();
    timer = null;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        futureTime,
        SizedBox(
          height: 20.w,
        ),
        Text(
          '交易倒计时',
          style: TextStyle(
              height: 1,
              fontSize: 22.sp,
              color: JadeColors.grey),
        )
      ],
    );
  }

  Widget getText(int time) {
    return Text(
      "${time < 0 ? 0 : time}",
      style: TextStyle(
          height: 1,
          fontWeight: FontWeight.w600,
          fontSize: 11,
          color: widget.type == 0 ? Color(0xFF63A4F8) : Color(0xFFF97483)),
    );
  }
}

class DateCountDownUtil{

  //根据总秒数转换为对应的 hh:mm:ss 格式
  static String constructTime(int seconds) {
    int day = seconds ~/3600 ~/24;
    int hour = seconds ~/ 3600 %24;
    int minute = seconds % 3600 ~/ 60;
    int second = seconds % 60;
    if(day != 0){
      return formatTime(day)+'天'+formatTime(hour) + "小时" + formatTime(minute) + "分" + formatTime(second)+'秒';
    }else if(hour != 0){
      return formatTime(hour) + "小时" + formatTime(minute) + "分" + formatTime(second)+'秒';
    }else if(minute !=0){
      return formatTime(minute) + "分" + formatTime(second)+'秒';
    }else if(second!=0){
      return formatTime(second)+'秒';
    }else {
      return '';
    }

  }

  //根据总秒数转换为对应的 hh:mm:ss 格式
  static String constructTimeTwo(int seconds) {
    int day = seconds ~/3600 ~/24;
    int hour = seconds ~/ 3600 %24;
    int minute = seconds % 3600 ~/ 60;
    int second = seconds % 60;
    if(day != 0){
      return formatTime(day)+':'+formatTime(hour) + ":" + formatTime(minute) + ":" + formatTime(second);
    }else if(hour != 0){
      return formatTime(hour) + ":" + formatTime(minute) + ":" + formatTime(second);
    }else if(minute !=0){
      return formatTime(minute) + ":" + formatTime(second);
    }else if(second!=0){
      return formatTime(second);
    }else {
      return '';
    }

  }

  //数字格式化，将 0~9 的时间转换为 00~09
  static String formatTime(int timeNum) {
    return timeNum < 10 ? "0" + timeNum.toString() : timeNum.toString();
  }

  //日期时间差 秒数
  static difference(startTime,endTime){
    return DateTime.parse(startTime).difference(endTime).inSeconds;
  }

  ///日期转时间戳
  static int dateToTimestamp(String date, {isMicroseconds = false}) {
    DateTime dateTime = DateTime.parse(date);
    int timestamp = dateTime.millisecondsSinceEpoch;
    if (isMicroseconds) {
      timestamp = dateTime.microsecondsSinceEpoch;
    }
    return timestamp;
  }
}

使用

ComeDown(
                endTime: articleBean.articleInfo?.newWanthaveArticlePOJO?.tradeEndTime,
                type: articleBean.articleInfo.cateId == 30 ?0:1,
              )
小蜜蜂嗡嗡
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter倒计时定时器
AppBlog.CN全栈架构
05-08 616
定时刷新子控件，同时使用于StatelessWidget及StatefulWidget的子控件。可以创建一个周期性的Timer，并且Timer的tick是从1开始的。实现一个倒计时获取重新获取验证码的功能。
Flutter倒计时/计时器的实现代码
08-26
主要介绍了Flutter倒计时/计时器的实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
[Flutter]倒计时和计时器
最新发布
Gamin
02-28 853
这个类不是线程安全的，因为Dart本身是单线程的，但是如果你使用它在Flutter的Isolates（类似于线程）中，请确保你正确地管理状态。此外，如果你的应用需要更复杂的定时器调度，你可能需要考虑其他的包或者解决方案。这个类可以提供启动、暂停、重启和关闭定时器的方法，并且确保定时完成后自动释放定时器资源。这样，你可以在任何地方订阅计时器的变化，并实现回调更新。类提供了更灵活的方式来实现单次或重复的延迟执行。可以在动画帧更新时执行代码，这可以用来实现延迟。方法用于设置定时器，接收延迟时间和要执行的动作。
Flutter之Timer实现短信验证码获取60s倒计时功能的代码
01-03
先看下效果： 两种需求场景： 1.广告页3s后跳转到首页 2.短信验证码60s倒计时 第一种的话，根据需求我们可以知道，我们想要的效果就是3s结束做出一个动作。 factory Timer(Duration duration, void callback()) { if (Zone.current == Zone.root) { // No need to bind the callback. We know that the root's timer will // be invoked in the root zone. return Zone.current.c
Flutter定时器、倒计时的快速上手及实战讲解
01-05
今天给大家讲讲 Flutter 里面定时器/倒计时的实现。 一般有两种场景： 我只需要你在指定时间结束后回调告诉我。回调只需要一次。 我需要你在指定时间结束后回调告诉我。回调可能多次。 下面针对这两种场景，我们来说下如何在 Flutter 里面使用。 回调一次的定时器 const timeout = const Duration(seconds: 5); print('currentTime='+DateTime.now().toString());\nTimer(timeout, () {\n //\u5230\u65f6\u56de\u8c03\n print('afterTimer='+DateTime.now().to
一个基于Flutter的倒计时计时器应用程序
Z20210224的博客
08-25 168
【代码】一个基于Flutter的倒计时计时器应用程序。
Flutter中“倒计时”的那些事儿
沐风的博客
12-02 975
好久不见了，文章有一段时间没有更新了，最近一直在沉迷工作无法自拨????。上周，应公司号召以及上次Google大会中Flutter宣讲的感染，计划将公司新项目采用Flutter技术实现。大概花了几天熟悉了一下Flutter基础语法和结构组成，便着手开始项目的搭建和基础模块功能开发，毕竟只有通过实战才能加快新技术的熟悉和“消化”。 说到验证码功能，我们通常的做法可能是借助于计时器来实现，抱着几乎肯定的态度...
flutter入门实战——好看的计时器
baorant24的博客
04-22 450
本文介绍了如何使用flutter实现一个好看的计时器
Flutter 倒计时功能
Eric的博客
04-02 5608
一、说明 要实现一个类似上图中滑动列表项倒计时功能，其中剩余时间是需要每分钟更新一次。 二、功能实现 class ItemOrderWidget extends StatefulWidget { final OrderEntity order; ItemOrderWidget({ Key key, this.order, }) : super(key: ...
Flutter实现倒计时功能,秒数转时分秒，然后倒计时
weixin_44911775的博客
08-11 2513
服务器返回的时间戳87392，现在的时间戳+87392 现在的时间戳，两者的时间戳相差二十多个小时，也就是说87392就是秒数，直接传秒数到上面的startCountDown方法即可。由于后台返回的是秒数，所以需要根据总秒数计算小时，分钟，秒。同时，当不满一个小时时，只显示分钟和秒数，当分钟和秒数只有一个数时（比如1分8秒，显示为01:08）前面加“0”处理。有一个需求，需要在页面进行显示倒计时，倒计时结束后，做相应的逻辑处理。第一个参数就是时间间隔，第二个参数就是事件处理回调。
Flutter实现倒计时功能
代码小疯子
08-09 5577
Flutter中通过Timer来实现定时任务
Flutter学习之倒计时计时器
Pillar的专栏
04-12 5023
1、自定义倒计时计时器控件： import 'dart:async'; import 'package:flutter/material.dart'; final TextStyle _availableStyle = TextStyle( fontSize: 16.0, color: Colors.pink[300], ); final TextStyle _unavailableS...
Flutter 知识 时间(定时,倒计时,延时)
weixin_38716347的博客
12-14 269
【代码】Flutter 知识 时间(定时,倒计时,延时)
Flutter | 让倒计时更简单
无夜之星辰的博客
08-25 408
极其简单的用法。
【Flutter】倒计时/计时器的实现
weixin_30757793的博客
05-16 511
比如发送短信验证码，发送成功后可能要求用户一段时间内不能再次发送，这时候我们就需要进行倒计时，时间到了才允许再次操作。 为了实现这样场景的需求，我们需要使用Timer.periodic。 如下图： 一、引入Timer对应的库 import 'dart:async'; 二、定义计时变量 class _LoginPageState extends...
Flutter秒表计时器的实现（上）
teddy_Ma的博客
05-13 2846
Flutter秒表计时器的实现
flutter 秒转时分秒
weixin_44911775的博客
07-11 615
【代码】flutter 秒转时分秒。
flutter 倒计时
weixin_44911775的博客
09-06 487
【代码】flutter 倒计时。
flutter future实现倒计时
08-09
Flutter中，可以使用Future来实现倒计时功能。下面是一个使用Future实现倒计时的代码示例： ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: '倒计时示例', theme: ThemeData( primarySwatch: Colors.blue, ), home: CountDownPage(), ); } } class CountDownPage extends StatefulWidget { @override _CountDownPageState createState() => _CountDownPageState(); } class _CountDownPageState extends State<CountDownPage> { int countDownValue = 10; @override void initState() { super.initState(); startCountDown(); } void startCountDown() { Future.delayed(Duration(seconds: 1), () { setState(() { countDownValue--; }); if (countDownValue > 0) { startCountDown(); } }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('倒计时示例'), ), body: Center( child: Text( '倒计时：$countDownValue', style: TextStyle(fontSize: 24), ), ), ); } } ``` 上述代码展示了如何创建一个名为CountDownPage的StatefulWidget，其中使用Future.delayed来实现倒计时的逻辑。在initState中调用了startCountDown方法来启动倒计时，每秒减少countDownValue的值，并通过setState来更新页面。当countDownValue为0时，停止倒计时。 在构建页面时，使用了Center和Text组件来展示倒计时的数值。 通过这种方式，我们可以在Flutter中使用Future来实现简单的倒计时功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值