Flutter監(jiān)聽當前頁面可見與隱藏狀態(tài)的代碼詳解

更新時間：2025年03月07日 08:27:35 作者：卡爾特斯

文章介紹了如何在Flutter中使用路由觀察者來監(jiān)聽應用進入前臺或后臺狀態(tài)以及頁面的顯示和隱藏,并通過代碼示例講解的非常詳細,需要的朋友可以參考下

flutter 可以監(jiān)聽 app 進入前臺還是后臺狀態(tài)，也可以監(jiān)聽當前某個頁面 當前正在顯示 還是 隱藏了。
找一個公共文件初始化一下 路由觀察者，例如：
- public.dart，只要能做成全局對象就行。

/// 路由觀察者
final routeObserver = RouteObserver<PageRoute>();

有了 路由觀察者 對象后，注冊為導航監(jiān)聽者：

main.dart

/// MaterialApp
Widget buildMaterialApp(BuildContext context) {
  // 這里直接在 MaterialApp 對象進行全局注冊，其他模式也有，例如 CupertinoApp、WidgetsAp、Navigator
  return GetMaterialApp(
      title: 'Flutter Demo',
      // 注冊
      navigatorObservers: [routeObserver],
    );
    ...
    ...
    ...
  }
}

頁面使用，推薦封裝作為底層 BaseStateful 使用，其他頁面繼承，可以隨時打開，也可以單個頁面使用：

import 'package:flutter/material.dart';
import 'package:base_project/utils/public.dart';

@immutable
class BaseStatefulController extends StatefulWidget {

  const BaseStatefulController({super.key});

  @override
  State<BaseStatefulController> createState() => BaseStatefulControllerState();
}

class BaseStatefulControllerState extends State<BaseStatefulController> with RouteAware {

  /// 啟用路由觀察者
  bool enableRouteObserver = false;

  @override
  void initState() {
    super.initState();
    // 等待加載
    WidgetsBinding.instance.addPostFrameCallback((_) {
      // 初始化上下文完成
      initStateContext();
    });
  }

  /// 初始化上下文完成，可以在這里做一些需要上下文的初始化操作
  void initStateContext () {
    // 注冊路由監(jiān)聽
    if (enableRouteObserver) {
      final route = ModalRoute.of(context);
      if (route is PageRoute) {
        routeObserver.subscribe(this, route);
      }
    }
  }

  @override
  void dispose() {
    // 取消路由監(jiān)聽
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  void didPush() {
    print("頁面被 push 到棧頂，頁面可見");
  }
  @override
  void didPop() {
    print("頁面被 pop，頁面銷毀");
  }
  @override
  void didPushNext() {
    print("有新頁面 push 進來，當前頁面進入不可見狀態(tài)");
  }
  @override
  void didPopNext() {
    print("上一個頁面被 pop，當前頁面重新可見");
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

方法	作用
`subscribe(routeAware, route)`	訂閱某個頁面，監(jiān)聽生命周期變化
`unsubscribe(routeAware)`	取消訂閱，避免內(nèi)存泄漏
`didPush()`	頁面進入可見
`didPop()`	頁面銷毀
`didPushNext()`	當前頁面被覆蓋，不可見
`didPopNext()`	上一個頁面被 `pop`，當前頁面重新可見