Flutter 如何停止触发图表更新的Timer.periodic定时任务

解决思路 #

你当前的问题核心是没有持有定期执行的Timer实例，无法主动终止定时任务，清空数据的操作完全不影响定时器本身的运行逻辑。只需要存储定时器引用，停止时直接取消定时器即可。

具体实现步骤 #

1. 首先在你的State类中声明一个Timer类型的成员变量，用于持有定时任务实例：

// 放在State类内部，作为成员变量
Timer? _liveUpdateTimer;

2. 修改启动按钮的点击逻辑，赋值定时器实例，同时避免重复启动多个定时任务：

onPressed: () {
  // 如果已有正在运行的定时器，先取消避免重复创建
  if (_liveUpdateTimer != null && _liveUpdateTimer!.isActive) {
    return;
  }
  _liveUpdateTimer = Timer.periodic(const Duration(seconds: 1), updateDataSource);
},

3. 修改停止按钮的点击逻辑，直接取消定时器即可，不需要清空chartData：

onPressed: () {
  if (_liveUpdateTimer != null && _liveUpdateTimer!.isActive) {
    _liveUpdateTimer!.cancel();
    _liveUpdateTimer = null;
  }
  // 不需要执行chartData.clear()，保留现有数据，下次启动可以继续更新
},

4. 补充页面销毁时的逻辑，避免页面销毁后定时器还在运行造成内存泄漏：

@override
void dispose() {
  if (_liveUpdateTimer != null && _liveUpdateTimer!.isActive) {
    _liveUpdateTimer!.cancel();
  }
  super.dispose();
}

效果说明 #

• 点击停止按钮后，定时任务直接终止，不会再执行updateDataSource的逻辑
• 现有图表数据会完整保留，后续再次点击启动按钮即可重新开始实时更新，不会出现数据清空的问题
• 避免了重复点击启动按钮创建多个并行定时器的bug

内容的提问来源于stack exchange，提问作者La Forge1071