Flutter实现页面退出后后台持续运行计时器的方案咨询

你的问题核心在于计时器和页面State绑定，页面销毁时计时器被取消且状态丢失，导致返回页面后重置。下面提供两种可行方案，分别适合页面切换场景和真正后台运行场景：

方案1：单例计时器服务（适合页面切换时保持运行） #

把计时器逻辑抽离成全局单例，独立于页面生命周期，通过Stream更新UI：

1. 实现单例计时器服务 #

import 'dart:async';

class TimerService {
  // 单例实例
  static final TimerService _instance = TimerService._internal();
  factory TimerService() => _instance;
  TimerService._internal();

  Timer? _timer;
  int _seconds = 0;
  // 广播流，支持多个页面监听
  final StreamController<int> _streamController = StreamController<int>.broadcast();

  // 对外暴露的流和当前秒数
  Stream<int> get timerStream => _streamController.stream;
  int get currentSeconds => _seconds;

  void startTimer() {
    // 避免重复启动
    if (_timer?.isActive ?? false) return;
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      _seconds++;
      _streamController.add(_seconds);
    });
  }

  void stopTimer() {
    _timer?.cancel();
    _timer = null;
    _seconds = 0;
    _streamController.add(_seconds);
  }

  // APP退出时调用，释放资源
  void dispose() {
    _timer?.cancel();
    _streamController.close();
  }
}

2. 修改TimerPage使用单例服务 #

class TimerPage extends StatefulWidget {
  const TimerPage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<StatefulWidget> createState() => _TimerPageState();
}

class _TimerPageState extends State<TimerPage> {
  final TimerService _timerService = TimerService();
  int _currentSeconds = 0;

  @override
  void initState() {
    super.initState();
    // 页面打开时自动启动（如果未运行）
    if (!(_timerService._timer?.isActive ?? false)) {
      _timerService.startTimer();
    }
    // 监听计时器流，更新UI
    _timerService.timerStream.listen((seconds) {
      setState(() {
        _currentSeconds = seconds;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(child: Text('$_currentSeconds Seconds passed')),
          ElevatedButton(
            onPressed: _timerService.stopTimer,
            child: const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text('Stop timer'),
            ),
          ),
        ],
      ),
    );
  }

  // 页面销毁时不取消计时器，保持后台运行
  @override
  void dispose() {
    super.dispose();
  }
}

这个方案的优势是简单易实现，适合页面切换场景，计时器状态全局共享，返回页面时能直接恢复当前计数。

方案2：Isolate实现（适合真正后台运行） #

如果需要APP退到后台后计时器仍能运行，需要用Isolate（独立于UI线程的隔离区），避免UI线程被系统挂起影响计时：

1. 实现Isolate计时器服务 #

import 'dart:async';
import 'dart:isolate';

class IsolateTimerService {
  static Isolate? _isolate;
  static SendPort? _sendPort;
  static final StreamController<int> _streamController = StreamController<int>.broadcast();
  static int _seconds = 0;

  Stream<int> get timerStream => _streamController.stream;
  int get currentSeconds => _seconds;

  void startTimer() async {
    if (_isolate != null) return;

    final receivePort = ReceivePort();
    // 启动Isolate
    _isolate = await Isolate.spawn(_timerIsolate, receivePort.sendPort);

    receivePort.listen((message) {
      if (message is SendPort) {
        _sendPort = message;
      } else if (message is int) {
        _seconds = message;
        _streamController.add(_seconds);
      }
    });
  }

  void stopTimer() {
    _sendPort?.send('stop');
    _isolate?.kill(priority: Isolate.immediate);
    _isolate = null;
    _sendPort = null;
    _seconds = 0;
    _streamController.add(_seconds);
  }

  // Isolate内部的计时器逻辑
  static void _timerIsolate(SendPort mainSendPort) {
    final isolateSendPort = SendPort();
    mainSendPort.send(isolateSendPort);

    Timer? timer;
    int seconds = 0;

    timer = Timer.periodic(const Duration(seconds: 1), (t) {
      seconds++;
      mainSendPort.send(seconds);
    });

    // 接收来自主线程的停止指令
    final receivePort = ReceivePort();
    receivePort.listen((message) {
      if (message == 'stop') {
        timer?.cancel();
        receivePort.close();
        Isolate.current.kill();
      }
    });
    mainSendPort.send(receivePort.sendPort);
  }

  void dispose() {
    stopTimer();
    _streamController.close();
  }
}

2. TimerPage集成Isolate服务 #

用法和单例方案基本一致，只需把TimerService替换成IsolateTimerService即可。

注意事项 #

1. 后台运行限制：即使使用Isolate，iOS对后台任务有严格时间限制（通常不超过几分钟），Android可以通过前台服务（Foreground Service）延长后台运行时间，需要用到第三方插件实现。
2. 状态持久化：如果需要APP重启后继续计时，建议保存计时器的开始时间戳到SharedPreferences，每次启动时计算当前时间与开始时间的差值，比直接保存秒数更准确。
3. 资源释放：在APP退出时（比如MyApp的dispose方法），要调用计时器服务的dispose()方法，避免内存泄漏。

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