Flutter ValueNotifier 倒计时 局部刷新组件 在StatelessWidget 中刷新倒计时

这篇博客详细介绍了在Flutter中如何实现一个倒计时组件,并在StatelessWidget中正确管理Timer,确保控件销毁时能够及时关闭Timer,避免资源泄漏。通过ValueNotifier监听倒计时变化,使用ListenableBuilder更新UI,提供了一种优雅的解决方案。
摘要由CSDN通过智能技术生成
class ContentItem extends StatelessWidget {
  Timer _timer;
  ValueNotifier<int> _timerValueNotifier = ValueNotifier(-1);

构造方法中初始化timer

  ContentItem(
      {this.age
     )
      : super(key: key) {
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      if (_timerValueNotifier == 0) {
        _timer.cancel();
      } else {
        _timerValueNotifier.value -= 1;
      }
    });

-=1代表 _timerValueNotifier 的局部刷新 

使用到的地方

      _timerValueNotifier.value = hour;

      return ValueListenableBuilder(
          valueListenable: _timerValueNotifier,
          builder: (BuildContext context, int value, Widget child) {
            //todo
            String timeText = value.toString();
            return _getTextByNomal(timeText);
          });

首先赋值给他要倒计时的时间 赋值后 可以通过value拿到当前的倒计时

在控件销毁的时候要注意关闭Timer

关闭方法需要在StatelessWidget中重写 createElement控件

class ContentItem extends StatelessWidget {


  @override
  StatelessElement createElement() =>
      StatelessElementDestoryTimer(this, _timer);

 传入Timer并进行注销

class StatelessElementDestoryTimer extends StatelessElement {
  final Timer timer;

  StatelessElementDestoryTimer(StatelessWidget widget, this.timer)
      : super(widget);

  @override
  void unmount() {
    super.unmount();
    if (timer != null) {
      timer.cancel();
    }
  }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

安果移不动

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值