【聲明：】本文是作者AWeiLoveAndroid原創(chuàng)，版權(quán)歸作者 AWeiLoveAndroid 所有，侵權(quán)必究。本文首發(fā)在公眾號(hào)Flutter那些事。如若轉(zhuǎn)發(fā)，請(qǐng)注明作者和來(lái)源地址！未經(jīng)授權(quán)，嚴(yán)禁私自轉(zhuǎn)載！
前面的文章我們介紹了Flutter的一些基礎(chǔ)知識(shí)點(diǎn)，基本上都是靜態(tài)為主的，今天我們開(kāi)始講一下Flutter的交互。做過(guò)前端的朋友，或者移動(dòng)端的朋友們，應(yīng)該對(duì)路由這個(gè)詞語(yǔ)是比較熟悉的。不熟悉的朋友也不要著急，我們這篇文章講的就是Flutter中的路由，讓大家掌握Flutter中的路由操作方式，以及數(shù)據(jù)交互方式。你不光可以學(xué)到路由知識(shí)，還可以學(xué)到路由中如何避免入坑。文章比較長(zhǎng)，希望大家可以收藏起來(lái)慢慢看。喜歡的話，就打賞一下吧，感謝大家的支持。
Flutter系列博文鏈接 ↓：
工具安裝：
Flutter基礎(chǔ)篇：
- 谷歌Flutter1.0正式版發(fā)布
- Flutter基礎(chǔ)篇（1）-- 跨平臺(tái)開(kāi)發(fā)框架和工具集錦
- Flutter基礎(chǔ)篇（2）-- 老司機(jī)用一篇博客帶你快速熟悉Dart語(yǔ)法
- Flutter基礎(chǔ)篇（3）-- Flutter基礎(chǔ)全面詳解
- Flutter基礎(chǔ)篇（4）-- Flutter填坑全面總結(jié)
- Flutter基礎(chǔ)篇（5）-- Flutter代碼模板，解放雙手，提高開(kāi)發(fā)效率必備
- Flutter基礎(chǔ)篇（6）-- 水平和垂直布局詳解
- Flutter基礎(chǔ)篇（7）-- Flutter更新錯(cuò)誤全面解決方案(圖文+視頻講解)
- Flutter基礎(chǔ)篇（8）-- Flutter for Web詳細(xì)介紹
- Flutter基礎(chǔ)篇（9）-- 手把手教你用Flutter實(shí)現(xiàn)Web頁(yè)面編寫
- Flutter1.9升級(jí)體驗(yàn)總結(jié)（Flutter Web 1.9最新版本填坑指南）
Flutter進(jìn)階篇：
- Flutter進(jìn)階篇（1）-- 手把手帶你快速上手調(diào)試Flutter項(xiàng)目
- Flutter進(jìn)階篇（2）-- Flutter路由詳解
- Flutter進(jìn)階篇（3）-- Flutter 的手勢(shì)（GestureDetector）分析詳解
- Flutter進(jìn)階篇（4）-- Flutter的Future異步詳解
- Flutter進(jìn)階篇（5）-- 使用Flutter創(chuàng)建插件詳解并發(fā)布到Pub庫(kù)
- Flutter進(jìn)階篇（6）-- PageStorageKey、PageStorageBucket和PageStorage使用詳解
- Flutter進(jìn)階篇（7）-- Flutter路由輕量級(jí)框架FRouter
Dart語(yǔ)法系列博文鏈接 ↓：
Dart語(yǔ)法基礎(chǔ)篇：
Dart語(yǔ)法進(jìn)階篇：
一、什么是路由
路由最開(kāi)始在前端領(lǐng)域是很流行的，路由技術(shù)最近幾年開(kāi)始在移動(dòng)端也逐漸蔓延開(kāi)來(lái)。路由主要是用于頁(yè)面跳轉(zhuǎn)的一種方式，方便管理頁(yè)面之間的跳轉(zhuǎn)和互相傳遞數(shù)據(jù)，進(jìn)行交互。使用路由，我們輕松實(shí)現(xiàn)從一個(gè)頁(yè)面轉(zhuǎn)換到另一個(gè)頁(yè)面，系統(tǒng)底層其實(shí)是在幫我們將小部件執(zhí)行入棧出棧操作，當(dāng)然至于它們?nèi)绾稳霔３鰲＞筒皇潜酒恼碌闹攸c(diǎn)了。
二、Flutter路由的詳細(xì)使用
（一）初始Navigator
在Android中，我們開(kāi)啟新的頁(yè)面是Activity。在iOS中，我們開(kāi)啟新的頁(yè)面是ViewControllers。在Flutter中，每一個(gè)頁(yè)面都是小部件， 我們?nèi)绾伍_(kāi)啟到新的頁(yè)面呢？Flutter給我們提供了一個(gè)API,叫做Navigator
Navigator 繼承自 StatefulWidget，它也是小組件，它有很多相關(guān)靜態(tài)函數(shù)，可以幫我們達(dá)到頁(yè)面跳轉(zhuǎn)和數(shù)據(jù)交互的功能：
- push 將設(shè)置的router信息推送到Navigator上，實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)。
- of 主要是獲取 Navigator最近實(shí)例的好狀態(tài)。
- pop 導(dǎo)航到新頁(yè)面，或者返回到上個(gè)頁(yè)面。
- canPop 判斷是否可以導(dǎo)航到新頁(yè)面
- maybePop 可能會(huì)導(dǎo)航到新頁(yè)面
- popAndPushNamed 指定一個(gè)路由路徑，并導(dǎo)航到新頁(yè)面。
- popUntil 反復(fù)執(zhí)行pop 直到該函數(shù)的參數(shù)predicate返回true為止。
- pushAndRemoveUntil 將給定路由推送到Navigator，刪除先前的路由，直到該函數(shù)的參數(shù)predicate返回true為止。
- pushNamed 將命名路由推送到Navigator。
- pushNamedAndRemoveUntil 將命名路由推送到Navigator，刪除先前的路由，直到該函數(shù)的參數(shù)predicate返回true為止。
- pushReplacement 路由替換。
- pushReplacementNamed 這個(gè)也是替換路由操作。推送一個(gè)命名路由到Navigator，新路由完成動(dòng)畫之后處理上一個(gè)路由。
- removeRoute 從Navigator中刪除路由，同時(shí)執(zhí)行Route.dispose操作。
- removeRouteBelow 從Navigator中刪除路由，同時(shí)執(zhí)行Route.dispose操作，要替換的路由是傳入?yún)?shù)anchorRouter里面的路由。
- replace 將Navigator中的路由替換成一個(gè)新路由。
- replaceRouteBelow 將Navigator中的路由替換成一個(gè)新路由，要替換的路由是是傳入?yún)?shù)anchorRouter里面的路由。
（二）路由的操作方式
（1）使用Navigator.push實(shí)現(xiàn)發(fā)送路由，Navigator.pop返回上一個(gè)頁(yè)面。
push函數(shù)的參數(shù)1是 上下文，參數(shù)2是 Router，我們這里使用的是 Router的孫子類（好幾層繼承的子類）MaterialPageRouter 這個(gè)類。該類必須要傳入一個(gè)閉包函數(shù) WidgetBuilder，該閉包函數(shù)的參數(shù)是 BuildContext對(duì)象，我們這里使用的是匿名函數(shù)的形式，加上胖箭頭符號(hào)，簡(jiǎn)寫成這樣：builder: (context) => new App(); 相信大家看到這里也基本能看明白這句表達(dá)式的含義。返回上一個(gè)頁(yè)面使用 Navigator.pop(context);
頁(yè)面A 的代碼如下圖所示：
目標(biāo)頁(yè)面 的代碼如下圖所示：
