Flutter中實現無Context跳轉的示例

這篇文章主要介紹了Flutter中實現無Context跳轉的示例，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

背景介紹

Navigator.of(context).push(MaterialPageRoute(builder: (context){
   return DemoPage();
  }));

在日常的項目開發中，我們一般push一個新頁面是用上面的方法的，利用Navigator.of(context)來進行push或者pop操作。

缺點：這種情況是必須傳context的，目的是為了利用Navigator.of(context)來獲取到NavigatorState對象，然后才能進行push或者pop操作。

那如果我要實現在項目的任何地方都可以push一個新頁面的話，而這個地方有可能獲取不到context，所以這個時候，就需要實現無context跳轉。

解決方案

無context跳轉，本質就是不必要我們每次都去傳context參數，然后利用一些操作直接去獲取到當前的NavigatorState。

方案1：利用GlobalKey

• 在Flutter中，利用GolbalKey利用獲取到對應Widget的State對象。所以，這里，我們可以通過一個GlobalKey的key值，來獲取到NavigatorState對象。

• MaterialApp中包裝了WidgetsApp，而WidgetsApp包裝了Navigator，并且將 Navigator的key屬性作為navigatorKey暴露出來了。所以，我們可以通過設置navigatorKey，然后利用這個key去獲取到NavigatorState對象。

這里貼一下相關的源碼，具體的大家可以自己去看源碼。

MaterialApp類：

WidgetsApp類：可以看出，我們定義的navigatorKey，最后是會傳給Navigator的key值，所以我們在外面就可以通過key.currentState()方法來獲取到這里的NavigatorState對象了。

class _WidgetsAppState extends State<WidgetsApp> implements WidgetsBindingObserver {

 GlobalKey<NavigatorState> _navigator;

 void _updateNavigator() {
 _navigator = widget.navigatorKey ?? GlobalObjectKey<NavigatorState>(this);
 }
 
 @override
 Widget build(BuildContext context) {
 Widget navigator;
 if (_navigator != null) {
  navigator = Navigator(
  key: _navigator,
  initialRoute: WidgetsBinding.instance.window.defaultRouteName != Navigator.defaultRouteName
   ? WidgetsBinding.instance.window.defaultRouteName
   : widget.initialRoute ?? WidgetsBinding.instance.window.defaultRouteName,
  onGenerateRoute: _onGenerateRoute,
  onUnknownRoute: _onUnknownRoute,
  observers: widget.navigatorObservers,
  );
 }
}

簡單的代碼實現

1、定義一個GlobalKey< NavigatorState>對象

 static GlobalKey<NavigatorState> navigatorKey=GlobalKey();

2、創建MaterialApp的對象的時候，將navigatorKey賦值給MaterialApp。

MaterialApp(
   navigatorKey: Router.navigatorKey,
)

使用GlobalKey在任意地方獲取NavigatorState對象

navigatorKey.currentState.pushNamed("/login");

方案2：利用NavigatorObserver

• NavigatorObserver，看這名字，就知道是可以用來監聽Navigator的變化。比如當push一個新頁面的時候，Navigator會監聽到NavigatorState發生變化，回調didPush（）方法。

注意：NavigatorObserver里面定義了一個NavigatorState對象navigator，所以我們可以通過自定義NavigatorObserver，然后直接利用這個navigator對象來做頁面push或者pop操作，這樣的話，我們就不用自己去利用context去獲取navigatorState對象了。

MaterialApp類，提供了navigatorObservers屬性，這樣我們就可以自定義NavigatorObserver去監聽Navigator的變化。

NavigatorState類，執行instState對象的時候，會將自身賦值到監聽的所有observer對象的_navigator里面。

簡單的代碼實現

1、自定義NavigatorObserver。

class CustomNavigatorObserver extends NavigatorObserver{
 static CustomNavigatorObserver _instance;

 static CustomNavigatorObserver getInstance() {
 if (_instance == null) {
  _instance = CustomNavigatorObserver();
 }
 return _instance;
 }
}

2、創建MaterialApp的對象的時候，將CustomNavigatorObserver賦值給MaterialApp

MaterialApp(
   navigatorObservers: [CustomNavigatorObserver()],
)

3、使用CustomNavigatorObserver在任意地方進行頁面操作

CustomNavigatorObserver.getInstance().navigator.pushNamed("/login");

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Flutter中實現無Context跳轉的示例”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!