Flutter 定时器相关

hxy06012026-06-02 14:43

在写JS时，大家都习惯了用setTimeout 和 setInterval 设置定时器。那么在Flutter中也有相关的。

JavaScript setTimeout $→\rightarrow$ → Dart Timer

Javascript

Javascrip 复制代码

setTimeout(() => { 
  console.log("两秒后执行"); 
}, 2000);

Flutter/Dart

Flutter/Dart 复制代码

import 'dart:async'; 
Timer(Duration(seconds: 2), () { 
    print("两秒后执行"); 
});

Flutter/Dart提供了delay的方法而Javascript需要结合Promise实现

Javascript 复制代码

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

await delay(2000);
print("在等待两秒后执行");

Flutter/Dart 复制代码

await Future.delayed(Duration(seconds: 2)); 
print("在等待两秒后执行");

JavaScript setInterval $→\rightarrow$ → Dart Timer.periodic 间隔多少时间来执行方法

Javascript

Javascript 复制代码

const intervalId = setInterval(() => { 
    console.log("每隔一秒执行"); 
}, 1000);

//停止执行的方法
clearInterval(intervalId);

Flutter/Dart

Flutter/Dart 复制代码

import 'dart:async'; 

Timer myTimer = Timer.periodic(Duration(seconds: 1), (timer) { 
    print("每隔一秒执行"); 
    //可以在一定的条件下取消执行
    if (someCondition) { 
        timer.cancel();
 }); 
 
 //停止执行的方法
 myTimer.cancel();

注：如果在Flutter statefullWidget中使用的时候需要在dispose方法里面调用cancel的方法否者将会在后台一直执行

Flutter/Dart 复制代码

class MyTimerWidget extends StatefulWidget { 
    @override _MyTimerWidgetState createState() => _MyTimerWidgetState(); 
} 

class _MyTimerWidgetState extends State<MyTimerWidget> { 
    Timer? _timer; 
    @override 
    void initState() { 
        super.initState(); 
        // 在创建之后开始计时
        _timer = Timer.periodic(Duration(seconds: 1), (timer) { 
            setState(() { 
              // 通过setState更新UI 
            }); 
        }); 
    } 
    @override 
    void dispose() { 
        _timer?.cancel(); 
        // 在这里清楚timer定时器
        super.dispose(); 
    } 
    @override 
    Widget build(BuildContext context) { 
        return Text("Timer is running..."); 
    } 
  }