Flutter列表中倒计时

1.列表中有不同时间跨度倒计时的列表
在实体类中增加Timer类型的字段,使在每个item中添加一个Timer,缺点是耗性能

bean{
Timer timer;
  var countdownSeconds;//倒计时剩余秒数
  String showTimeName;//显示在item中的字符串
}

2、在获取到接口数据后开启倒计时

_httpExpressList(){
    HttpApplication.getInstance().expressList(callBack: (result){
      if(result !=null){
        var dataList = result['list'] as List;
        var dateNo = DateTime.now();
        for(int i = 0; i< dataList.length; i++){
          PromotionExpressItemBean _promotionExpressItemBean = PromotionExpressItemBean.fromJson(dataList[i]);
          var diff = DateCountDownUtil.difference(_promotionExpressItemBean.endTime,dateNo);
          _promotionExpressItemBean.countdownSeconds = diff;
          _promotionExpressItemBean.timer = _startTimer(_promotionExpressItemBean);
          _promotionExpressList.add(_promotionExpressItemBean);
        }
        setState(() {});
      }

    },errorCallBack: (error){});
  }

_cancelTimer(){
    if(_promotionExpressList.length>0){
      for(int i =0;i<_promotionExpressList.length;i++){
        _promotionExpressList[i].timer.cancel();
      }
    }
  }

  _startTimer(PromotionExpressItemBean promotionExpressItemBean){
    return Timer.periodic(Duration(seconds: 1), (timer){
      promotionExpressItemBean.countdownSeconds -=1;
      promotionExpressItemBean.showTimeName = DateCountDownUtil.constructTime(promotionExpressItemBean.countdownSeconds);
       //DateCountDownUtil转天时分秒的工具类
      if(promotionExpressItemBean.countdownSeconds <=0){
        promotionExpressItemBean.timer.cancel();
        promotionExpressItemBean.showTimeName="已结束";
      }
      setState(() {
      });
    });
  }

  
  void dispose() {
    // TODO: implement dispos
    _cancelTimer();
    super.dispose();
  }

2.列表中的倒计时时间跨度是相同的,对于统一时间跨度的列表我们可以使用同一个Timer进行倒计时。

Timer _timer;
_httpExpressList(){
    HttpApplication.getInstance().expressList(callBack: (result){
      Loading.hideLoading(this.context);
      if(result !=null){
        if(mounted){
          var dataList = result['list'] as List;
          var dateNo = DateTime.now();
          List<PromotionExpressItemBean> _dataExpressList = [];
          for(int i = 0; i< dataList.length; i++){
            PromotionExpressItemBean _promotionExpressItemBean = PromotionExpressItemBean.fromJson(dataList[i]);
            if(_promotionExpressItemBean.endTime!=null){
              var diff = DateCountDownUtil.difference(_promotionExpressItemBean.endTime,dateNo);
              _promotionExpressItemBean.countdownSeconds = diff;
              //_promotionExpressItemBean.timer = _startTimer(_promotionExpressItemBean);
            }
            _dataExpressList.add(_promotionExpressItemBean);
          }
          if(_promotionExpressList.length > 0){
            _cancelTimer();
            _promotionExpressList.clear();
          }
          _promotionExpressList = _dataExpressList;
          _startTimer();
          setState(() {});
        }
      }

    },errorCallBack: (error){
      Loading.hideLoading(context);
    });
  }

_startTimer(){
    if(_promotionExpressList.length > 0){
      _timer = Timer.periodic(Duration(seconds: 1), (timer){
        for(int i =0;i<_promotionExpressList.length;i++){
          if(_promotionExpressList[i].endTime != null
              && _promotionExpressList[i].endTime.isNotEmpty){
            var diff = DateCountDownUtil.difference(_promotionExpressList[i].endTime,DateTime.now());
            if(diff>0){
              diff -=1;
            }
            _promotionExpressList[i].showTimeName = diff>0?DateCountDownUtil.constructTime(diff):'已结束';
          }
          setState(() {});
        }
      });
    }
    return _timer;
  }

_cancelTimer(){
    if(_timer!=null && _timer.isActive){
      _timer.cancel();
      _timer = null;
    }
  }

  void dispose() {
    // TODO: implement dispose
    _cancelTimer();
    super.dispose();
  }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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、付费专栏及课程。

余额充值