您好,登錄后才能下訂單哦!
這篇文章主要介紹了Flutter中實現(xiàn)無Context跳轉(zhuǎn)的示例,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
背景介紹
Navigator.of(context).push(MaterialPageRoute(builder: (context){ return DemoPage(); }));
在日常的項目開發(fā)中,我們一般push一個新頁面是用上面的方法的,利用Navigator.of(context)
來進(jìn)行push或者pop操作。
缺點:這種情況是必須傳context的,目的是為了利用Navigator.of(context)
來獲取到NavigatorState對象,然后才能進(jìn)行push或者pop操作。
那如果我要實現(xiàn)在項目的任何地方都可以push一個新頁面的話,而這個地方有可能獲取不到context,所以這個時候,就需要實現(xiàn)無context跳轉(zhuǎn)。
解決方案
無context跳轉(zhuǎn),本質(zhì)就是不必要我們每次都去傳context參數(shù),然后利用一些操作直接去獲取到當(dāng)前的NavigatorState。
方案1:利用GlobalKey
在Flutter中,利用GolbalKey利用獲取到對應(yīng)Widget的State對象。所以,這里,我們可以通過一個GlobalKey的key值,來獲取到NavigatorState對象。
MaterialApp中包裝了WidgetsApp,而WidgetsApp包裝了Navigator,并且將 Navigator的key屬性作為navigatorKey暴露出來了。所以,我們可以通過設(shè)置navigatorKey,然后利用這個key去獲取到NavigatorState對象。
這里貼一下相關(guān)的源碼,具體的大家可以自己去看源碼。
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, ); } }
簡單的代碼實現(xiàn)
1、定義一個GlobalKey< NavigatorState>對象
static GlobalKey<NavigatorState> navigatorKey=GlobalKey();
2、創(chuàng)建MaterialApp的對象的時候,將navigatorKey賦值給MaterialApp。
MaterialApp( navigatorKey: Router.navigatorKey, )
使用GlobalKey在任意地方獲取NavigatorState對象
navigatorKey.currentState.pushNamed("/login");
方案2:利用NavigatorObserver
NavigatorObserver,看這名字,就知道是可以用來監(jiān)聽Navigator的變化。比如當(dāng)push一個新頁面的時候,Navigator會監(jiān)聽到NavigatorState發(fā)生變化,回調(diào)didPush()方法。
注意:NavigatorObserver里面定義了一個NavigatorState對象navigator,所以我們可以通過自定義NavigatorObserver,然后直接利用這個navigator對象來做頁面push或者pop操作,這樣的話,我們就不用自己去利用context去獲取navigatorState對象了。
MaterialApp類,提供了navigatorObservers屬性,這樣我們就可以自定義NavigatorObserver去監(jiān)聽Navigator的變化。
NavigatorState類,執(zhí)行instState對象的時候,會將自身賦值到監(jiān)聽的所有observer對象的_navigator里面。
簡單的代碼實現(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的對象的時候,將CustomNavigatorObserver賦值給MaterialApp
MaterialApp( navigatorObservers: [CustomNavigatorObserver()], )
3、使用CustomNavigatorObserver在任意地方進(jìn)行頁面操作
CustomNavigatorObserver.getInstance().navigator.pushNamed("/login");
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“Flutter中實現(xiàn)無Context跳轉(zhuǎn)的示例”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。