Flutter Timer 的基本使用

级别：★☆☆☆☆
标签：「Flutter Timer」
作者： ITWYW
审校： QiShare团队

前言

笔者最近写 Flutter 时，使用 Timer 过程中遇到了一些问题，在本文中做一个分享。

一、创建 Timer

使用如下代码可以创建一个时间间隔为1秒，执行10次操作的Flutter Timer。

  int countValue = 10;
  
  Timer _timer;
  
  // 启动Timer
  void _startTimer() {
    final Duration duration = Duration(seconds: 1);
    cancelTimer();
    
    _timer = Timer.periodic(duration, (timer) { 
        countValue = countValue -1;
        if (this.mounted) {
          setState(() {
            
          });
        }
        print('CountValue');
        print(countValue);
        if (countValue <= 0) {
          cancelTimer();
        }
    });
  }

二、Timer 常见问题

Flutter Timer 使用过程中可能在页面销毁或应用进入后台时，忘记取消 Timer。下边笔者给大家分享下相应场景的取消 Timer 的方式。

1. 返回到上一个页面时没有销毁 Timer

处理方式如下：

1.1 实现取消 Timer 的逻辑

  void cancelTimer() {
    if (_timer != null) {
      _timer.cancel();
    }
  }

1.2 在页面销毁的时候，调用取消 Timer 的逻辑

  @override
  void dispose() {
    cancelTimer();
    
    super.dispose();
  }

2. 取消Timer相关的生命周期

当应用进入后台的时候，我们也希望把 Timer 取消掉，处理方式如下：实现抽象类 WidgetsBindingObserver 的接口，并且实现相应抽象方法做取消 Timer 的处理逻辑。

2.1 当前 State 类遵守 WidgetsBindingObserver 协议

class _TimerState extends State<TimerPage>  with WidgetsBindingObserver {
    
}

2.2 State 类实现如下检测应用生命周期变动的方法

在如下声明周期变动的方法中，做取消 timer 的操作。在应用进入后台后，先进入到 inactive，然后进入paused 的状态。 此时可以取消 timer ，避免应用在进入后台后，还在执行 Timer 中的处理。

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    print('state状态：$state');
    switch (state) {
      case AppLifecycleState.resumed: {
        
        break;
      }
        
      case AppLifecycleState.paused:{
        cancelTimer();
        break;
      }
      case AppLifecycleState.inactive:{
        cancelTimer();
        break;
      }
      case AppLifecycleState.detached:{
        cancelTimer();
        break;
      }
    }
    super.didChangeAppLifecycleState(state);
  }

三、参考学习网址

Timer class

四、推荐文章

Flutter中的RenderObjectElement与RenderObjectWidget
Flutter中的StatelessWidget及其生命周期
Flutter中的Widget
Flutter中的Element（下篇）
Flutter中的Element（上篇）
iOS 解决 [NSURL fileURLWithPath:] 对 # 的编码问题
Xcode 调整导航目录字体大小b
Swift 5.1 (21) - 泛型
Swift 5.1 (20) - 协议
Swift 5.1 (19) - 扩展
Swift 5.1 (18) - 嵌套类型
浅谈编译过程