時(shí)隔許久，繼之前發(fā)的Flutter入門（環(huán)境配置）文章之后，終于有時(shí)間來(lái)寫一下其他方面的東西啦，之前的20天真的是忙得焦頭爛額啊，從學(xué)習(xí)Flutter到將項(xiàng)目懟上線不到一個(gè)月的時(shí)間，邊學(xué)邊開(kāi)發(fā)，沒(méi)有輪子可搬，自己瘋狂的造，還不斷的踩坑（坑還不容易找到解決辦法），整天整天的沒(méi)有停下來(lái)過(guò)，簡(jiǎn)直了。。。
好在到現(xiàn)在熬過(guò)來(lái)了，也終于有時(shí)間來(lái)好好的對(duì)Flutter進(jìn)行一下總結(jié)和回顧，請(qǐng)各位小伙伴們敬請(qǐng)期待后面的不斷更新呦。
今天跟大家聊聊Flutter中非常重要的一個(gè)東西：路由
這是不得不好好研究和學(xué)習(xí)的一個(gè)知識(shí)點(diǎn)，用的不好會(huì)讓你非常的頭疼，也會(huì)給你造成非常多的問(wèn)題。

第一點(diǎn)：push使用

1.pushNamed——Navigator.of(context).pushNamed('routeName'); 

此種方法只是簡(jiǎn)單的將我們需要進(jìn)入的頁(yè)面push到棧頂，以此來(lái)顯示當(dāng)前頁(yè)面,其參數(shù)是一個(gè)字符串類型，傳入的是頁(yè)面對(duì)應(yīng)的路由名稱
該路由名稱需要在程序主入口中進(jìn)行定義。定義方法為：

void main() { runApp( new MaterialApp( home: new Screen1(), routes: <String, WidgetBuilder> { '/screen1': (BuildContext context) => new Screen1(), '/screen2' : (BuildContext context) => new Screen2(), '/screen3' : (BuildContext context) => new Screen3(), }, ) ); } 

使用：Navigator.of(context).pushNamed('/screen1');直接進(jìn)入screen1頁(yè)面（每次都將新建一個(gè)新的頁(yè)面）

2.1 pushReplacementNamed——Navigator.of(context).pushReplacementNamed('/screen4'); 

指把當(dāng)前頁(yè)面在棧中的位置替換成跳轉(zhuǎn)的頁(yè)面（替換導(dǎo)航器的當(dāng)前路由，通過(guò)推送路由[routeName]），當(dāng)新的頁(yè)面進(jìn)入后，之前的頁(yè)面將執(zhí)行dispose方法。
下面為官方說(shuō)明：

Replace the current route of the navigator that most tightly encloses the given context by pushing the route named [routeName] and then disposing the previous route once the new route has finished animating in. 

即比如當(dāng)前從頁(yè)面1進(jìn)入頁(yè)面2，在頁(yè)面2使用
Navigator.of(context).pushReplacementNamed('/screen3');進(jìn)入頁(yè)面3，當(dāng)進(jìn)入了頁(yè)面3后，頁(yè)面2將執(zhí)行dispose方法，此時(shí)在頁(yè)面3返回時(shí)，會(huì)回到頁(yè)面1.

使用情況：例如
從SplashScreen到HomeScreen。它應(yīng)該只顯示一次，用戶不應(yīng)該再?gòu)闹髌聊换氐剿Ｔ谶@種情況下，由于我們將要進(jìn)入一個(gè)全新的屏幕，
我們可能想要使用這個(gè)方法來(lái)實(shí)現(xiàn)它的enter animation屬性。

2.2pushReplacement——Navigator.pushReplacement( context, MaterialPageRoute(builder: (BuildContext context) => screen4())); 

這個(gè)用法跟2.1相同，只是路由的傳遞有差別，上方的是傳遞路由名稱（頁(yè)面對(duì)應(yīng)的名稱，需在入口定義（本文第一點(diǎn)）），而后者只需new對(duì)應(yīng)頁(yè)面即可，而且可以傳遞
參數(shù)（傳參方式類似于本文后續(xù)所說(shuō)的傳遞方法）。

3.popAndPushNamed——Navigator.popAndPushNamed(context, '/screen4'); 

指將當(dāng)前頁(yè)面pop，然后跳轉(zhuǎn)到制定頁(yè)面（將當(dāng)前路由彈出導(dǎo)航器，并將命名路由推到它的位置。）
下面為官方說(shuō)明：

Pop the current route off the navigator that most tightly encloses the given context and push a named route in its place. 

使用情況：例如
在購(gòu)物應(yīng)用中，有產(chǎn)品列表，用戶在產(chǎn)品列表中可以通過(guò)篩選，來(lái)進(jìn)一步選擇商品，在這個(gè)過(guò)程中，用戶點(diǎn)擊篩選按鈕時(shí)，會(huì)進(jìn)入篩選條件選擇界面，當(dāng)用戶點(diǎn)擊
確定篩選按鈕時(shí)，應(yīng)彈出篩選界面，并使用新的篩選條件進(jìn)入產(chǎn)品列表。這種情況popAndPushNamed就更合適了。

4.pushNamedAndRemoveUntil——Navigator.of(context).pushNamedAndRemoveUntil('/screen4', (Route<dynamic> route) => false); 

指將制定的頁(yè)面加入到路由中，然后將其他所有的頁(yè)面全部pop, (Route<dynamic> route) => false將確保刪除推送路線之前的所有路線。
這時(shí)候?qū)⒋蜷_(kāi)一個(gè)新的screen4頁(yè)面

Push the route with the given name onto the navigator, and then remove all the previous routes until the `predicate` returns true. 

使用情況：例如
當(dāng)用戶點(diǎn)擊了退出登錄時(shí)，我們需要進(jìn)入某一個(gè)頁(yè)面（比如點(diǎn)退出登錄后進(jìn)入了登錄頁(yè)），這個(gè)時(shí)候用戶點(diǎn)擊返回時(shí)不應(yīng)該能進(jìn)入任何一個(gè)頁(yè)面，這種情況就可以使用。

5.1 pushNamedAndRemoveUntil——Navigator.of(context).pushNamedAndRemoveUntil('/screen4', ModalRoute.withName('/screen1')); 

指將制定的頁(yè)面加入到路由中，然后將之前的路徑移除知道制定的頁(yè)面為止（將具有給定名稱的路由推到導(dǎo)航器上，然后刪除所有路徑前面的路由直到'predicate'返回true為止。）
這時(shí)候?qū)N毀棧內(nèi)除了screen4的頁(yè)面，點(diǎn)擊直接去棧內(nèi)screen4，這時(shí)screen4會(huì)重新build

Push the route with the given name onto the navigator, and then remove all the previous routes until the `predicate` returns true. 

使用情況：例如
一個(gè)購(gòu)物應(yīng)用程序的例子!或者任何需要支付交易的應(yīng)用程序。因此，在這些應(yīng)用程序中，一旦用戶完成了支付事件，所有與交易或購(gòu)物車相關(guān)的屏幕都應(yīng)該從堆棧中刪除，用戶應(yīng)該進(jìn)入到支付確認(rèn)頁(yè)面。單擊back按鈕應(yīng)將它們返回到產(chǎn)品列表或主屏幕。
使用實(shí)例：
1-->2-->3,3到4時(shí)使用Navigator.pushNamedAndRemoveUntil(context,"/screen4",ModalRoute.withName('/screen1'));
這時(shí)候如果在頁(yè)面4點(diǎn)擊返回，將會(huì)直接退出程序。
1-->2-->3,3到4時(shí)使用Navigator.pushNamedAndRemoveUntil(context,"/screen4",ModalRoute.withName('/'));
這時(shí)候如果在頁(yè)面4點(diǎn)擊返回，將會(huì)直接回到頁(yè)面1。
1-->2-->1-->2-->3,3到4時(shí)使用Navigator.pushNamedAndRemoveUntil(context,"/screen4",ModalRoute.withName('/screen1'));
這時(shí)候如果在頁(yè)面4點(diǎn)擊返回，將會(huì)回到第二個(gè)1頁(yè)面。

5.2

Navigator.pushAndRemoveUntil( context, MaterialPageRoute(builder: (BuildContext context) => newscreen4()), ModalRoute.withName('/'), 

這種方法跟上述方法作用相同，不同之處在于，上述傳遞的是路由名稱，這個(gè)名稱需要你在入口處進(jìn)行路由指定，而這種則無(wú)需指定，直接new 出來(lái)即可，
而且可以傳遞參數(shù)。（看其名稱即可發(fā)現(xiàn)差別pushNamedAndRemoveUntil與pushAndRemoveUntil）使用這種作用如下
1-->2-->3,3到4時(shí)使用此方法，這時(shí)候如果在頁(yè)面4點(diǎn)擊返回，將會(huì)直接回到頁(yè)面1。

如果使用

Navigator.pushAndRemoveUntil( context, MaterialPageRoute(builder: (BuildContext context) => Screen4()), (Route<dynamic> route) => false, ); 

這時(shí)候進(jìn)入4后。4將成為唯一的一個(gè)頁(yè)面。其他頁(yè)面都將pop出棧，這個(gè)跟上述pushNamedAndRemoveUntil也一致。

6.popUntil——Navigator.popUntil(context, ModalRoute.withName('/screen2')); 

有些應(yīng)用場(chǎng)景下，用戶可能不得不填寫一個(gè)由三部分組成的長(zhǎng)表單，該表單可能在移動(dòng)應(yīng)用程序的三個(gè)連續(xù)屏幕中顯示。現(xiàn)在在表單的第三個(gè)頁(yè)面，用戶決定取消填寫表單。用戶單擊Cancel，就會(huì)彈出所有之前的與表單相關(guān)的屏幕，并將用戶帶回主屏幕，從而丟失所有與表單相關(guān)的數(shù)據(jù)(在這種情況下，這是我們想要的)。我們不會(huì)在這里推出任何新東西，只是回到以前的路線。

第二點(diǎn)pop

1.Navigator.of(context).maybePop(); 

maybePop 會(huì)自動(dòng)進(jìn)行判斷，如果當(dāng)前頁(yè)面pop后，會(huì)顯示其他頁(yè)面，不會(huì)出現(xiàn)問(wèn)題，則將執(zhí)行當(dāng)前頁(yè)面的pop操作
否則將不執(zhí)行。

2.Navigator.of(context).canPop(); 

canPop判斷當(dāng)前頁(yè)面能否進(jìn)行pop操作，并返回bool值 

3.Navigator.of(context).pop(); 

直接退出當(dāng)前頁(yè)面

第三點(diǎn)傳參和參數(shù)返回

傳參的方式很簡(jiǎn)單，在需要接收參數(shù)的頁(yè)面進(jìn)行參數(shù)定義，并加入其構(gòu)造函數(shù)中，在跳轉(zhuǎn)到該頁(yè)面時(shí)，使用MaterialPageRoute并在頁(yè)面中傳入?yún)?shù)即可。

String params;Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context) => new mainPage(params))); 接收參數(shù) class mainPage extends StatelessWidget { final String userName; mainPage(this.userName); @override Widget build(BuildContext context) { print(userName); } 

帶返回值的頁(yè)面跳轉(zhuǎn)：

String userName = "yinll"; Navigator.push( context, new MaterialPageRoute( builder: (BuildContext context) => new Screen5(userName))).then((data){ result =data; print(result); }); 

然后screen5中，在返回時(shí)使用：Navigator.of(context).pop('這是頁(yè)面5返回的參數(shù)');
在pop中寫上返回的的值，這時(shí)候在上方的then中即可得到返回的數(shù)據(jù)。

好啦小伙伴們，今天就先說(shuō)這么多，，后續(xù)我也會(huì)保持用法的不斷更新，可以點(diǎn)下關(guān)注，以便及時(shí)得到更新通知哦。哈哈！
作為剛?cè)肟覨lutter的我而言，有些說(shuō)的可能也存在錯(cuò)誤，歡迎批評(píng)指正！

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.junxiaosheng.cn/17618.html