Flutter Timer 的基本使用

avatar
奇舞团移动端团队 @奇舞团

级别:★☆☆☆☆
标签:「Flutter 开发基础Tips」「Flutter Timer」「Flutter 单例」
作者: 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) - 嵌套类型
浅谈编译过程