Flutter學(xué)習(xí)教程之Route跳轉(zhuǎn)以及數(shù)據(jù)傳遞
前言
我們知道移動(dòng)應(yīng)用頁(yè)面跳轉(zhuǎn)是非常重要的一部分,幾乎我們的程序和用戶(hù)打交道的就是頁(yè)面,或者叫view,我們Android基本都是Activity和Fragment。而且Flutter當(dāng)中叫做Route,它就是與用戶(hù)打交道的頁(yè)面。本文詳細(xì)探索一下Flutter當(dāng)中頁(yè)面之間是怎么交互的。
Route類(lèi)似Android中Activity,所以Flutter中的頁(yè)面跳轉(zhuǎn)類(lèi)似Android中Activity之間跳轉(zhuǎn),Intent攜帶傳遞的數(shù)據(jù)。
正文
頁(yè)面跳轉(zhuǎn)
我們現(xiàn)在看看Flutter中是怎么進(jìn)行頁(yè)面交互的,也就是頁(yè)面之間的跳轉(zhuǎn)。
從上一個(gè)頁(yè)面A跳轉(zhuǎn)下一個(gè)頁(yè)面B,有兩種方式:
- 通過(guò)Navigator.push()跳轉(zhuǎn)
- 通過(guò)Navigator.pushName()跳轉(zhuǎn)
返回上一個(gè)頁(yè)面:Navigator.pop();
提示:通過(guò)Navigator.pushNamed()跳轉(zhuǎn)的,記住一定要注冊(cè)routeName!??!
提示:通過(guò)Navigator.pushNamed()跳轉(zhuǎn)的,記住一定要注冊(cè)routeName?。?!
提示:通過(guò)Navigator.pushNamed()跳轉(zhuǎn)的,記住一定要注冊(cè)routeName!??!
重要的事情說(shuō)三遍😏😏😏?。?!
代碼如下:
//第一種:通過(guò)Navigator.push()跳轉(zhuǎn),類(lèi)似Android中的startActivity(),指定Activity類(lèi)名這種方式; Navigator.push(context, MaterialPageRoute(builder: (context) { return ThirdRoute(); })); //第二種方式:通過(guò)Navigator.pushName(),類(lèi)似Android中的startActivity(),指定class全路徑這種方式; //先在MaterialApp里面注冊(cè)Route routes: { SecondRoute.routeName: (context) => SecondRoute(),} Navigator.pushNamed(context, SecondRoute.routeName); //返回上一個(gè)頁(yè)面,類(lèi)似Activity的finish(); Navigator.pop(context);
頁(yè)面跳轉(zhuǎn)并攜帶數(shù)據(jù)
基于上面的兩種跳轉(zhuǎn)方式,對(duì)應(yīng)有兩種
1、通過(guò)Navigator.push()跳轉(zhuǎn),將參數(shù)傳到B頁(yè)面的構(gòu)造方法中,代碼如下:
//A頁(yè)面跳轉(zhuǎn),直接將參數(shù)傳到B頁(yè)面的構(gòu)造方法里面 Navigator.push(context, MaterialPageRoute( builder:(context) => BRouter(string) )) //BRouter構(gòu)造方法 class BRouter extends StatelessWidget{ final String str; BRouter(this.str); }
2、通過(guò)Navigator.pushNamed()跳轉(zhuǎn),使用ModalRoute.of()或者M(jìn)aterialApp(CupertinoApp)構(gòu)造器中的onGenerateRouter()獲取參數(shù),建議使用ModalRouter.of()。代碼如下:
//A頁(yè)面跳轉(zhuǎn),arguments就是需要傳遞的數(shù)據(jù),這里的arguments是一個(gè)可需參數(shù) Navigator.pushName(context,routerName,arguments); //B頁(yè)面提取參數(shù),傳的是什么類(lèi)型,就用什么類(lèi)型接值,這里用String演示 //第一種用ModalRouter接值 String arg = ModalRouter.of(context).setting.arguments; //第二種在onGenerateRouter里面接值 MaterialApp( onGenerateRoute: (settings) { // 先根據(jù)setting里面的name判斷是哪個(gè)Router if (settings.name == PassArgumentsScreen.routeName) { // 然后取出setting里面的arguments final ScreenArguments args = settings.arguments; // 然后再通過(guò)具體Router的構(gòu)造方法穿過(guò),類(lèi)似上面的第一種方式接值方式 return MaterialPageRoute( builder: (context) { return PassArgumentsScreen( title: args.title, ); }, ); } }, );
返回上一個(gè)頁(yè)面并返回?cái)?shù)據(jù)
從當(dāng)前頁(yè)面B返回上一個(gè)頁(yè)面A回傳數(shù)據(jù):
一般都是點(diǎn)擊B頁(yè)面某個(gè)控件,關(guān)閉當(dāng)前頁(yè)面,把需要的數(shù)據(jù)回傳,類(lèi)似Android中的SetResult(Result.ok,intent)
//當(dāng)前頁(yè)面B中的按鈕 RaisedButton( onPressed: () { // 點(diǎn)擊button,關(guān)閉頁(yè)面,回到上一個(gè)頁(yè)面,回傳數(shù)據(jù) Navigator.pop(context, '回傳的數(shù)據(jù)'); // 這個(gè)方法通過(guò)方法名也能看出來(lái),關(guān)閉當(dāng)前頁(yè)面,跳轉(zhuǎn)到具體的頁(yè)面,也可以回傳數(shù)據(jù)。 // tips:參數(shù)加[]說(shuō)明是非必傳參數(shù) Navigator.popAndPushNamed(context, routeName,[T result]) }, child: Text('返回'), ); //回到上一個(gè)頁(yè)面A,需要接值的話(huà),在點(diǎn)擊去下一個(gè)頁(yè)面的需要使用到async延遲接收 //當(dāng)BuildContext在Scaffold之前時(shí),調(diào)用Scaffold.of(context)會(huì)報(bào)錯(cuò)。所以這里通過(guò)Builder Widget來(lái)解決 Builder(builder: (context){ return RaisedButton( onPressed: () async { //2: 通過(guò)Navigator.push方式攜帶跳轉(zhuǎn) String str = "我是第一個(gè)頁(yè)面的數(shù)據(jù)"; //疑問(wèn)為什么只能用var接值,不能用String? var result = await Navigator.pushNamed(context, SecondRoute.routeName, arguments: str); if (result != null) { //通過(guò)snackBar將接收到的數(shù)據(jù)show出來(lái)。 Scaffold.of(context).showSnackBar(SnackBar( content: Text(result), backgroundColor: Colors.blue, duration: Duration(milliseconds: 500), )); } }, child: Text("攜帶數(shù)據(jù)跳轉(zhuǎn)"), ); }),
下面我們來(lái)看看最終的演示效果:
總結(jié)
這樣我們就把Flutter當(dāng)中最基礎(chǔ)的頁(yè)面跳轉(zhuǎn),以及頁(yè)面之間數(shù)據(jù)交互講解完了,小伙伴可以愉快的去做各種頁(yè)面交互啦😊😊😊。
好了,以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
Android開(kāi)發(fā)中使用sqlite實(shí)現(xiàn)新聞收藏和取消收藏的功能
本篇文章主要介紹了sqlite實(shí)現(xiàn)新聞收藏和取消收藏功能,主要涉及到oracle數(shù)據(jù)庫(kù)方面的內(nèi)容,對(duì)于Android開(kāi)發(fā)sqlite實(shí)現(xiàn)收藏和取消功能感興趣的朋友可以參考下本文2016-11-11Android編程監(jiān)聽(tīng)APK安裝與刪除等過(guò)程的方法
這篇文章主要介紹了Android編程監(jiān)聽(tīng)APK安裝與刪除等過(guò)程的方法,涉及Android事件監(jiān)聽(tīng)、權(quán)限控制、廣播操作等相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-10-10Android TabHost選項(xiàng)卡標(biāo)簽圖標(biāo)始終不出現(xiàn)的解決方法
這篇文章主要介紹了Android TabHost選項(xiàng)卡標(biāo)簽圖標(biāo)始終不出現(xiàn)的解決方法,涉及Android界面布局相關(guān)屬性與狀態(tài)設(shè)置操作技巧,需要的朋友可以參考下2019-03-03Android中檢測(cè)當(dāng)前是否為主線(xiàn)程最可靠的解決方法
這篇文章主要介紹了Android中檢測(cè)當(dāng)前是否為主線(xiàn)程最可靠的解決方法,本文先是給出了最可靠的方法,然后給出了幾個(gè)實(shí)驗(yàn)例子,需要的朋友可以參考下2015-01-01android實(shí)現(xiàn)截圖并動(dòng)畫(huà)消失效果的思路詳解
這篇文章主要介紹了android實(shí)現(xiàn)截圖并動(dòng)畫(huà)消失的思路詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06Android LineChart繪制多條曲線(xiàn)的方法
這篇文章主要為大家詳細(xì)介紹了Android LineChart繪制多條曲線(xiàn)的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05