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

Posted 2021-08-04 安果移不动

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();
    }
  }
}