Flutter 自定义年月日倒计时

电玩女神 2021-08-27 12:09 492阅读 0赞

因项目中的订单页需要一个定时器，比如下单后需要进行倒计时，等倒计时完后，订单状态自动关闭。

如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]

这里显示等17分25秒就是我们所需要做的功能。

项目里还有其他倒计时类型，比如年月日，天之类的，

先上一个工具类：

//时间格式化，根据总秒数转换为对应的 hh:mm:ss 格式
      static String constructTime(int seconds) { 
        int day = seconds ~/3600 ~/24;
        int hour = seconds ~/ 3600;
        int minute = seconds % 3600 ~/ 60;
        int second = seconds % 60;
        if(day != 0){ 
          return '$day天$hour小时$minute分$second秒后自动取消';
        }else if(hour != 0){ 
          return '$hour小时$minute分$second秒后自动取消';
        }else if(minute !=0){ 
          return '$minute分$second秒后自动取消';
        }else if(second!=0){ 
          return '$second秒后自动取消';
        }else { 
          return '';
        }
    // return formatTime(day)+'天'+formatTime(hour) + "小时" + formatTime(minute) + "分" + formatTime(second)+'秒后自动取消';
      }
    
      static String constructVipTime(int seconds) { 
        int day = seconds ~/3600 ~/ 24;
        int hour = seconds ~/ 3600;
        int minute = seconds % 3600 ~/ 60;
        int second = seconds % 60;
        if(day!= 0){ 
          return '剩$day天$hour小时$minute分';
        }else if(hour!= 0){ 
          return '剩$hour小时$minute分';
        }else if(minute!=0){ 
          return '剩$minute分';
        }else { 
          return '';
        }
    // return formatTime(day)+'天'+formatTime(hour) + "小时" + formatTime(minute) + "分" + formatTime(second)+'秒后自动取消';
      }
      //数字格式化，将 0~9 的时间转换为 00~09
      static String formatTime(int timeNum) { 
        return timeNum < 10 ? "0" + timeNum.toString() : timeNum.toString();
      }

再看一下如何使用：

class OrderPageState extends State<OrderPage> { 
    
      String countContent ; // 倒计时内容
    
      Timer _timer;
      int seconds = 0;
    
      ///.......
    
       @override
      Widget build(BuildContext context) { 
    
        countContent = Util.constructTime(seconds);
    
        return new Scaffold(
            appBar: HeadTitleBar(
              text: '订单详情',
              rightShow: true,
              rightIcPath: ImageConstant.icon_talk_black,
              callback: (){ 
                RouteUtil.jump2ChatPage(context);
              },),
            body: _buildRoot());
      }
    
      
        void cancelTimer() { 
        if (_timer != null) { 
          _timer.cancel();
          _timer = null;
        }
      }
    
      void startTimer() { 
        //设置 1 秒回调一次
        const period = const Duration(seconds: 1);
        _timer = Timer.periodic(period, (timer) { 
    
          //更新界面
          setState(() { 
            //秒数减一，因为一秒回调一次
            seconds --;
    // print('我在更新界面>>>>>>>>>>>>>> $seconds');
          });
          if (seconds == 0) { 
            //倒计时秒数为0，取消定时器
            print('我被取消了 ');
            cancelTimer();
            getData();
          }
        });
      }
    
        void getData() async{ 
    
        await DioUtil.request("xxx",
          method: DioUtil.GET,
          ).then((res) { 
            var time = res.orderExprieTime;
            if(time !=null){ 
              try{ 
                var _diffDate = DateTime.parse(time.toString());
                //获取当期时间
                var now = DateTime.now();
                var twoHours = _diffDate.difference(now);
                //获取总秒数，2 分钟为 120 秒
                seconds = twoHours.inSeconds;
                startTimer();
              }catch(e){ 
                seconds = 0;
              }
            }
          }
          loading = true;
          if(!mounted)return;
          setState(() { 
          });
        }).catchError((e){ 
        });
      }
      
     @override
      void dispose() { 
        super.dispose();
        cancelTimer();
      }
    }

注意：一定要在dispose方法中销毁该定时器，不然会一只走下去的，其中`countContent`可以写在具体的text中，大概就是这样。

更多文章查看个人主页：

[Github搭建个人博客（2019最新版,亲测）][Github_2019]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]: /images/20210529/7af46c45399449c9aca55fab05b8bf79.png
[Github_2019]: https://blog.csdn.net/xudailong_blog/article/details/78762262