Flutter页面跳转后如何停止原页面build及性能消耗？

针对你遇到的后台页面仍执行build、持续接收刷新数据导致性能损耗的问题，以下是几种可落地的优化方案：

1. 借助State生命周期精准控制资源 #

当页面被推入后台（如跳转到NextPage）时，State会触发deactivate()方法；回到前台时触发activate()方法。利用这两个钩子统一管理需要暂停/恢复的资源：

class _HomePageState extends State<HomePage> {
  VoidCallback? _timingsCallback;
  StreamSubscription? _dataSubscription;
  Timer? _refreshTimer;

  @override
  void initState() {
    super.initState();
    _timingsCallback = _handleTimings;
    SchedulerBinding.instance.addTimingsCallback(_timingsCallback!);
    _dataSubscription = someStream.listen(_updateData);
    _refreshTimer = Timer.periodic(const Duration(seconds: 1), (_) => _refreshUI());
  }

  @override
  void deactivate() {
    // 页面进入后台时暂停资源
    SchedulerBinding.instance.removeTimingsCallback(_timingsCallback!);
    _dataSubscription?.pause();
    _refreshTimer?.cancel();
    super.deactivate();
  }

  @override
  void activate() {
    // 回到前台时恢复资源
    SchedulerBinding.instance.addTimingsCallback(_timingsCallback!);
    _dataSubscription?.resume();
    _refreshTimer = Timer.periodic(const Duration(seconds: 1), (_) => _refreshUI());
    super.activate();
  }

  @override
  void dispose() {
    // 页面销毁时彻底清理
    SchedulerBinding.instance.removeTimingsCallback(_timingsCallback!);
    _dataSubscription?.cancel();
    _refreshTimer?.cancel();
    super.dispose();
  }

  void _handleTimings(List<FrameTiming> timings) {
    // 仅在页面活跃时处理逻辑
    if (!mounted) return;
    // ... 原有处理逻辑
  }

  // ... 其他方法
}

2. 用RouteAware监听页面路由状态 #

对于跨页面的路由切换，使用RouteAware结合RouteObserver可以更精准地感知页面是否处于栈顶（活跃状态）：

• 第一步，全局注册RouteObserver：

final RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();

void main() {
  runApp(MaterialApp(
    navigatorObservers: [routeObserver],
    // ... 其他配置
  ));
}

• 第二步，在页面State中实现RouteAware：

class _HomePageState extends State<HomePage> with RouteAware {
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    routeObserver.subscribe(this, ModalRoute.of(context)!);
  }

  @override
  void dispose() {
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  void didPushNext() {
    // 当前页面被新页面覆盖，进入后台
    _pauseAllResources();
  }

  @override
  void didPopNext() {
    // 新页面被弹出，当前页面回到前台
    _resumeAllResources();
  }

  void _pauseAllResources() {
    // 暂停Streams、计时器、Scheduler回调等
  }

  void _resumeAllResources() {
    // 恢复所有资源
  }
}

3. 封装通用资源管理类统一管控 #

如果项目中有大量页面需要处理类似逻辑，封装一个通用的资源管理类可以避免重复代码：

class PageResourceManager {
  final List<StreamSubscription> _subscriptions = [];
  final List<Timer> _timers = [];
  VoidCallback? _schedulerCallback;

  void addStreamSubscription(StreamSubscription subscription) {
    _subscriptions.add(subscription);
  }

  void addTimer(Timer timer) {
    _timers.add(timer);
  }

  void setSchedulerCallback(VoidCallback callback) {
    _schedulerCallback = callback;
    SchedulerBinding.instance.addTimingsCallback(callback);
  }

  void pause() {
    for (var sub in _subscriptions) {
      sub.pause();
    }
    for (var timer in _timers) {
      timer.cancel();
    }
    if (_schedulerCallback != null) {
      SchedulerBinding.instance.removeTimingsCallback(_schedulerCallback!);
    }
  }

  void resume() {
    for (var sub in _subscriptions) {
      sub.resume();
    }
    // 计时器需要重新创建，因为cancel后无法恢复
    _timers.clear();
    if (_schedulerCallback != null) {
      SchedulerBinding.instance.addTimingsCallback(_schedulerCallback!);
    }
  }

  void dispose() {
    for (var sub in _subscriptions) {
      sub.cancel();
    }
    for (var timer in _timers) {
      timer.cancel();
    }
    if (_schedulerCallback != null) {
      SchedulerBinding.instance.removeTimingsCallback(_schedulerCallback!);
    }
  }
}

使用时，在页面State中实例化这个类，在路由/生命周期回调中调用pause()和resume()即可。

4. 条件性跳过无效刷新 #

在所有触发UI更新的逻辑中，先判断页面是否处于活跃状态，跳过无效的处理：

void _updateData(Data data) {
  // 仅当页面挂载且处于前台时更新UI
  if (!mounted || !_isPageActive) return;
  setState(() {
    // ... 更新状态
  });
}

void _handleTimings(List<FrameTiming> timings) {
  if (!mounted || !_isPageActive) return;
  // ... 原有处理逻辑
}

其中_isPageActive可以通过RouteAware的回调来标记（进入后台设为false，回到前台设为true）。

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