Flutter 如何監聽當前頁面 push顯示/消失 pop消失/顯示

關鍵字 MaterialApp navigatorObservers

Flutter的StatefulWidget StatelessWidget生命週期中沒有組件出現或者消失的回調,主要是要靠路由的監聽

  • 創建一個路由監聽
final RouteObserver<ModalRoute<void>> _routeObserver =
      RouteObserver<ModalRoute<void>>();
  • 這裏封裝了一個單例,方便在各個頁面裏獲取這個路由監聽
import 'package:flutter/material.dart';

class AppRouteObserver {
  //這是實際上的路由監聽器
  static final RouteObserver<ModalRoute<void>> _routeObserver =
      RouteObserver<ModalRoute<void>>();
  //這是個單例
  static final AppRouteObserver _appRouteObserver =
      AppRouteObserver._internal();

  AppRouteObserver._internal() {}
  //通過單例的get方法輕鬆獲取路由監聽器
  RouteObserver<ModalRoute<void>> get routeObserver {
    return _routeObserver;
  }

  factory AppRouteObserver() {
    return _appRouteObserver;
  }
}
  • 添加到MaterialAppnavigatorObservers
MaterialApp(
.....

navigatorObservers: [
                    AppRouteObserver().routeObserver
                  ],

...)
  • 需要監聽的頁面進行訂閱 with RouteAware
class _xxxPageState extends State<xxx> with RouteAware {
...

  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
  /// 路由訂閱
    AppRouteObserver().routeObserver.subscribe(this, ModalRoute.of(context)!);
  }

  @override
  void dispose() {
    // TODO: implement dispose
  /// 取消路由訂閱
    AppRouteObserver().routeObserver.unsubscribe(this);
    super.dispose();
  }

  /// Called when the current route has been pushed.
  /// 當前的頁面被push顯示到用戶面前 viewWillAppear.
  @override
  void didPush() { }

  /// Called when the current route has been popped off.
  /// 當前的頁面被pop viewWillDisappear.
  @override
  void didPop() { }

  /// Called when the top route has been popped off, and the current route
  /// shows up.
  /// 上面的頁面被pop後當前頁面被顯示時 viewWillAppear.
  @override
  void didPopNext() { }

  /// Called when a new route has been pushed, and the current route is no
  /// longer visible.
  /// 從當前頁面push到另一個頁面 viewWillDisappear.
  @override
  void didPushNext() { }

轉自:https://www.jianshu.com/p/d0897a870caa

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章