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

目前成都創(chuàng)新互聯(lián)已為近千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管運(yùn)營(yíng)、企業(yè)網(wǎng)站設(shè)計(jì)、臨邑網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

背景介紹

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

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

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

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

解決方案

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

方案1：利用GlobalKey

• 在Flutter中，利用GolbalKey利用獲取到對(duì)應(yīng)Widget的State對(duì)象。所以，這里，我們可以通過(guò)一個(gè)GlobalKey的key值，來(lái)獲取到NavigatorState對(duì)象。

• MaterialApp中包裝了WidgetsApp，而WidgetsApp包裝了Navigator，并且將 Navigator的key屬性作為navigatorKey暴露出來(lái)了。所以，我們可以通過(guò)設(shè)置navigatorKey，然后利用這個(gè)key去獲取到NavigatorState對(duì)象。

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

MaterialApp類：

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

class _WidgetsAppState extends State implements WidgetsBindingObserver {

 GlobalKey _navigator;

 void _updateNavigator() {
 _navigator = widget.navigatorKey ?? GlobalObjectKey(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,
  );
 }
}

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

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

 static GlobalKey navigatorKey=GlobalKey();

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

MaterialApp(
   navigatorKey: Router.navigatorKey,
)

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

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

方案2：利用NavigatorObserver

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

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

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

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

簡(jiǎn)單的代碼實(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)行頁(yè)面操作

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Flutter中實(shí)現(xiàn)無(wú)Context跳轉(zhuǎn)的示例”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!