背景介紹

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

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

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

那如果我要實(shí)現(xiàn)在項(xiàng)目的任何地方都可以push一個(gè)新頁面的話，而這個(gè)地方有可能獲取不到context，所以這個(gè)時(shí)候，就需要實(shí)現(xiàn)無context跳轉(zhuǎn)。

解決方案

無context跳轉(zhuǎn)，本質(zhì)就是不必要我們每次都去傳context參數(shù)，然后利用一些操作直接去獲取到當(dāng)前的NavigatorState。

方案1：利用GlobalKey

• 在Flutter中，利用GolbalKey利用獲取到對(duì)應(yīng)Widget的State對(duì)象。所以，這里，我們可以通過一個(gè)GlobalKey的key值，來獲取到NavigatorState對(duì)象。
• MaterialApp中包裝了WidgetsApp，而WidgetsApp包裝了Navigator，并且將 Navigator的key屬性作為navigatorKey暴露出來了。所以，我們可以通過設(shè)置navigatorKey，然后利用這個(gè)key去獲取到NavigatorState對(duì)象。

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

MaterialApp類：

WidgetsApp類：可以看出，我們定義的navigatorKey，最后是會(huì)傳給Navigator的key值，所以我們?cè)谕饷婢涂梢酝ㄟ^key.currentState()方法來獲取到這里的NavigatorState對(duì)象了。

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,
  );
 }
}

簡單的代碼實(shí)現(xiàn)

1、定義一個(gè)GlobalKey< NavigatorState>對(duì)象

 static GlobalKey<NavigatorState> navigatorKey=GlobalKey();

2、創(chuàng)建MaterialApp的對(duì)象的時(shí)候，將navigatorKey賦值給MaterialApp。

MaterialApp(
   navigatorKey: Router.navigatorKey,
)

使用GlobalKey在任意地方獲取NavigatorState對(duì)象

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

方案2：利用NavigatorObserver

• NavigatorObserver，看這名字，就知道是可以用來監(jiān)聽Navigator的變化。比如當(dāng)push一個(gè)新頁面的時(shí)候，Navigator會(huì)監(jiān)聽到NavigatorState發(fā)生變化，回調(diào)didPush（）方法。

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

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

NavigatorState類，執(zhí)行instState對(duì)象的時(shí)候，會(huì)將自身賦值到監(jiān)聽的所有observer對(duì)象的_navigator里面。

簡單的代碼實(shí)現(xiàn)

1、自定義NavigatorObserver。

class CustomNavigatorObserver extends NavigatorObserver{
 static CustomNavigatorObserver _instance;

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

2、創(chuàng)建MaterialApp的對(duì)象的時(shí)候，將CustomNavigatorObserver賦值給MaterialApp

MaterialApp(
   navigatorObservers: [CustomNavigatorObserver()],
)

3、使用CustomNavigatorObserver在任意地方進(jìn)行頁面操作

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

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論