Flutter 倒计时实现

Flutter 倒计时实现


1.此组建用时间戳计算倒计时

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

import 'dart:ui';

class itemOrderWidget extends StatefulWidget {
  final int order;
  final String type;
  final childrenCallBack;
  itemOrderWidget({
    Key key,
    this.order,
    this.type,
    this.childrenCallBack,
  }) : super(key: key);
  @override
  _itemOrderWidgetState createState() => _itemOrderWidgetState(timerControl: order);
}

class _itemOrderWidgetState extends State<itemOrderWidget> {
  _itemOrderWidgetState({this.timerControl});

  int timerControl;
  String remainTime = '--:--';// 显示相应的剩余时间
  Timer _timer;

  @override
  void initState() {
    super.initState();
    // 初始化的时候开启倒计时
    start(timerControl);
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Text(
      remainTime,
      style: TextStyle(
          fontSize: 22.0, color: Color(0xffAA1F52), fontFamily: 'Akrobat-Bold'),
    );
  }
  void caculateTime(nowTime, endTime) {
    var _surplus = endTime.difference(nowTime);
    int day = (_surplus.inSeconds ~/ 3600) ~/ 24;
    int hour = (_surplus.inSeconds ~/ 3600) % 24;
    int minute = _surplus.inSeconds % 3600 ~/ 60;
    // 如果用到秒的话计算
     int second = _surplus.inSeconds % 60;

    String minStat = "0";  //统计总分钟
    String secondString = "0"; //秒
    String str = ""; //统计
    minStat = (day*24*60 + hour*60 + minute).toString();    //换算成分

    if(int.parse(minStat) < 10){
      minStat = "0" + minStat.toString();
    }
    secondString = second < 10 ?  "0" + second.toString() :second.toString();
    str =minStat+":"+secondString;
    setState(() {
      remainTime = str;
    });

  }

  void startCountDown(time){
    var nowTime = DateTime.now();
    var endTime = DateTime.parse(time.toString());

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

    const repeatPeriod = const Duration(seconds: 1);

    caculateTime(nowTime, endTime);


  _timer = new Timer.periodic(repeatPeriod, (timer) {
    //到时回调
    nowTime = nowTime.add(repeatPeriod);

    if (endTime.millisecondsSinceEpoch - nowTime.millisecondsSinceEpoch < 0) {
      //取消定时器,避免无限回调
      timer.cancel();
      timer = null;
      setState(() {
        remainTime = '00:00';  //最小限制在00:00
      });
//      print("无限回调???????");
      widget.childrenCallBack(widget.type); //回调值
      return null;
    }

    caculateTime(nowTime, endTime);
  });


  }
  void start(timerControl){
      DateTime expiredTimeFormat = DateTime.fromMillisecondsSinceEpoch(timerControl);
      if(timerControl -  DateTime.now().millisecondsSinceEpoch > 0){ 
            startCountDown(expiredTimeFormat);
      }else{					// 此处为防止进来时就为00:00导致计时器跳动
        setState(() {
          remainTime = '00:00';
        });
      }
  }
  @override
  void dispose() {
    super.dispose();
    // 在页面回收或滑动复用回收的时候一定要把 timer 清除
    if (_timer != null) {
      if (_timer.isActive) {
        _timer.cancel();
        _timer = null;
      }
    }
  }

  @override
  void didUpdateWidget(itemOrderWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    //传入的新值不等于旧值时赋值,避免使用多个倒计时组建时造成的值为上次传入的值
    if(oldWidget.order != widget.order){  
      timerControl = widget.order;
    }
    // 外部重新请求接口后重新进行倒计时,这个方法是用来监控外部 setState 的
    start(timerControl);
  }
}

2.调用

 new itemOrderWidget(order:item['statusExpiredUnixTime'],type:'WAITING',childrenCallBack:(value) =>widget.childrenCallBack(value)),

在这里插入图片描述

原创文章 5 获赞 0 访问量 174

猜你喜欢

转载自blog.csdn.net/klousYG/article/details/105855087