Flutter開(kāi)發(fā)中的路由參數(shù)處理
Navigator 的 push 和 pop方法
Navigator 導(dǎo)航器的 push 和 pop 方法可以攜帶參數(shù)在頁(yè)面間傳遞,其他變形的方法也一樣。pushNamed 方法原型如下:
Future<T?> pushNamed<T extends Object?>( String routeName, { Object? arguments, }) { return push<T>(_routeNamed<T>(routeName, arguments: arguments)!); }
除了 routeName 的命名路由以外,還有個(gè)可選參數(shù) arguments 用于在路由頁(yè)面?zhèn)鬟f參數(shù)。pop 方法也一樣:
void pop<T extends Object?>([ T? result ]) { //... }
可以攜帶一個(gè) result 回傳到上級(jí)頁(yè)面。
代碼實(shí)現(xiàn)
我們使用一個(gè)列表跳轉(zhuǎn)到詳情頁(yè)來(lái)演示路由參數(shù)獲?。斜順?gòu)建文章請(qǐng)看//www.dbjr.com.cn/article/213052.htm)。點(diǎn)擊列表行時(shí)攜帶列表數(shù)據(jù)項(xiàng)的 id 跳轉(zhuǎn)到詳情頁(yè)。從詳情頁(yè)返回時(shí)再把該 id 回傳。列表項(xiàng)的 Widget 新增了一個(gè) id屬性,由構(gòu)建列表時(shí)初始化得到。
class DynamicItem extends StatelessWidget { final int id; final String title; final String imageUrl; final int viewCount; static const double ITEM_HEIGHT = 100; static const double TITLE_HEIGHT = 80; static const double MARGIN_SIZE = 10; const DynamicItem(this.id, this.title, this.imageUrl, this.viewCount, {Key key}) : super(key: key); //... }
列表的容器使用 GestureDetector 包裹,以便響應(yīng)點(diǎn)擊事件。 onTap 方法定義為一個(gè) async 方法,以便使用 await 獲取導(dǎo)航返回時(shí)的參數(shù),并使用一個(gè) SnackBar 顯示返回的 id。這里 pushNamed 攜帶了一個(gè) Map 對(duì)象將列表的 id傳遞到詳情頁(yè)。
@override Widget build(BuildContext context) { return GestureDetector( child: Container( margin: EdgeInsets.all(MARGIN_SIZE), child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ _imageWrapper(this.imageUrl), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ _titleWrapper(context, this.title), _viewCountWrapper(this.viewCount.toString()), ], ), ) ], ), ), onTap: () async { Map<String, dynamic> routeParams = {'id': id}; var arguments = await Navigator.of(context) .pushNamed(RouterTable.dynamicDetail, arguments: routeParams); ScaffoldMessenger.of(context).showSnackBar(SnackBar( content: Text("從動(dòng)態(tài)${(arguments as Map<String, dynamic>)['id']}返回"), )); }, ); }
這里還使用了一個(gè) arguments變量 接收導(dǎo)航返回的參數(shù),導(dǎo)航若有返回參數(shù),會(huì)返回一個(gè) Future 對(duì)象,使用 await 即可接收。然后在使用 as 轉(zhuǎn)換為實(shí)際的類(lèi)型進(jìn)行使用。 在詳情頁(yè)中,F(xiàn)lutter 提供了一個(gè)ModalRoute的類(lèi)從當(dāng)前上下文獲取路由配置參數(shù),代碼如下所示:
class DynamicDetail extends StatelessWidget { const DynamicDetail({Key key}) : super(key: key); @override Widget build(BuildContext context) { Map<String, dynamic> routeParams = ModalRoute.of(context).settings?.arguments; return WillPopScope( child: Scaffold( appBar: AppBar( title: Text('動(dòng)態(tài)詳情'), brightness: Brightness.dark, ), body: Center( child: Text("產(chǎn)品 id: ${routeParams['id']}"), ), ), onWillPop: () async { Navigator.of(context).pop({'id': routeParams['id']}); return true; }, ); } }
實(shí)際上這個(gè)ModalRoute.of(context).settings就是我們上一篇路由攔截中的onGenerateRoute的 settings 參數(shù),因此假設(shè)我們需要增加額外的路由參數(shù)(例如全局參數(shù)),則可以在 onGenerateRoute 方法中重新組裝路由參數(shù)。 這里有個(gè)地方需要注意,因?yàn)榉祷貢r(shí)要攜帶參數(shù),因此我們需要攔截返回響應(yīng)事件,這時(shí)候整個(gè)組件可以使用 WillPopScope 包裹,該方法帶有兩個(gè)參數(shù):
- child:子組件,即原有的頁(yè)面組件;
- onWillPop:返回前攔截處理,返回一個(gè) Future<bool>對(duì)象,若為 false,則不會(huì)返回。若為 true,則返回上一級(jí)。這里我們調(diào)用了 攜帶參數(shù)的 pop 方法以便將參數(shù)回傳。實(shí)際這里往往做一些其他處理,例如表單沒(méi)有保存詢(xún)問(wèn)是否確認(rèn)李可,還有廣大電商的活動(dòng)頁(yè)詢(xún)問(wèn)你是“忍痛離開(kāi)”或是“再看一會(huì)”的處理。
最終效果
最終運(yùn)行效果如下圖所示,詳情頁(yè)獲取到了 id 參數(shù),返回的時(shí)候也接收到了對(duì)應(yīng)的 id。
以上就是Flutter開(kāi)發(fā)中的路由參數(shù)處理的詳細(xì)內(nèi)容,更多關(guān)于Flutter 路由參數(shù)處理的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
RecyclerView實(shí)現(xiàn)插入和刪除
這篇文章主要為大家詳細(xì)介紹了RecyclerView實(shí)現(xiàn)插入和刪除,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08Android自定義ViewGroup打造各種風(fēng)格的SlidingMenu
這篇文章主要介紹了Android自定義ViewGroup打造各種風(fēng)格的SlidingMenu的相關(guān)資料,需要的朋友可以參考下2016-02-02詳解Flutter如何繪制曲線,折線圖及波浪動(dòng)效
這篇文章主要為大家介紹線條類(lèi)圖形的繪制(正弦曲線、折線圖),并且結(jié)合 Animation 實(shí)現(xiàn)了常見(jiàn)的波浪動(dòng)效,感興趣的小伙伴可以了解一下2022-03-03Android權(quán)限管理之Permission權(quán)限機(jī)制及使用詳解
本篇文章主要介紹了Android權(quán)限管理之Permission權(quán)限機(jī)制及使用,主要講訴了android的權(quán)限使用問(wèn)題,有需要的可以了解一下。2016-11-11Android使alertDialog.builder不會(huì)點(diǎn)擊外面和按返回鍵消失的方法
本篇文章主要介紹了Android使alertDialog.builder不會(huì)點(diǎn)擊外面和按返回鍵消失的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-01-01Android自定義控件實(shí)現(xiàn)萬(wàn)能的對(duì)話(huà)框
這篇文章主要為大家詳細(xì)介紹了Android自定義控件實(shí)現(xiàn)萬(wàn)能對(duì)話(huà)框的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03