Flutter開發之導航與路由管理

所謂路由管理，就是管理頁面之間如何跳轉，也被稱為導航管理。這和原生開發類似，無論是Android還是iOS，導航管理都是通過維護一個路由棧來實作的，路由入棧(push)操作對應打開一個新頁面，路由出棧(pop)操作對應頁面關閉操作。在Flutter開發中，實作頁面跳轉需要同時使用Route 和 Navigator。

Route是一個應用程式抽象的螢幕或頁面；

Navigator 是一個管理路由的widget；

路由(Route)，在移動開發中通常用來表示移動應用的頁面（Page），具體來說，Route在Android中通常指一個Activity，在iOS中指一個ViewController。

Navigator是一個路由管理的widget，它通過一個棧來管理一個路由widget集合。通常目前螢幕顯示的頁面就是棧頂的路由，Navigator提供了一系列方法來管理路由棧。

為了說明Flutter是如何實作路由跳轉的，我們建立兩個頁面：NewRoute.dart和main.dart。

其中，NewRoute.dart的源碼如下：

新路由繼承自StatelessWidget，界面很簡單，在頁面中間顯示一句"This is new route"。然後，修改main.dart的源碼如下：

運作上面的代碼，當我們點選按鈕後，路由就會打開一個新的路由頁面

MaterialPageRoute繼承自PageRoute類，PageRoute類是一個抽象類，表示占有整個螢幕空間的一個模态路由頁面，它還定義了路由建構及切換時過渡動畫的相關接口及屬性。MaterialPageRoute 是Material元件庫的一個Widget，它可以針對不同平台，實作與平台頁面切換動畫風格一緻的路由切換動畫，具體來說：

對于Android，當打開新頁面時，新的頁面會從螢幕底部滑動到螢幕頂部；當關閉頁面時，目前頁面會從螢幕頂部滑動到螢幕底部後消失，同時上一個頁面會顯示到螢幕上。

對于iOS，當打開頁面時，新的頁面會從螢幕右側邊緣一緻滑動到螢幕左邊，直到新頁面全部顯示到螢幕上，而上一個頁面則會從目前螢幕滑動到螢幕左側而消失；當關閉頁面時，正好相反，目前頁面會從螢幕右側滑出，同時上一個頁面會從螢幕左側滑入。

我們使用MaterialPageRoute來完成路由跳轉時，MaterialPageRoute構造函數提供了幾個的，參數，格式如下：

這些參數的具體含義如下：

builder 是一個WidgetBuilder類型的回調函數，它的作用是建構路由頁面的具體内容，傳回值是一個widget。我們通常要實作此回調，傳回新路由的執行個體。

settings 包含路由的配置資訊，如路由名稱、是否初始路由（首頁）。

maintainState：預設情況下，當入棧一個新路由時，原來的路由仍然會被儲存在記憶體中，如果想在路由沒用的時候釋放其所占用的所有資源，可以設定maintainState為false。

fullscreenDialog表示新的路由頁面是否是一個全屏的模态對話框，在iOS中，如果fullscreenDialog為true，新頁面将會從螢幕底部滑入（而不是水準方向）。

Navigator是Flutter應用開發中的一個路由管理的widget，它通過一個棧來管理一個路由widget集合。通常，目前螢幕顯示的頁面就是棧頂的路由。Navigator提供了一系列方法來管理路由棧，我們可以使用 push 和 pop 兩個操作來進行頁面的入棧和出棧。

将給定的路由入棧（即打開新的頁面），傳回值是一個Future對象，用以接收新路由出棧（即關閉）時的傳回資料。

執行push 操作時，我們主要使用兩個方法：一個是直接 push 一個路由，另外一個是 pushNamed 一個命名路由位址。

下邊是 Navigator.push 的源碼，入參的 Route 對象中有一個 RouteSettings 成員變量，我們可以在構造 Route 對象的時候将需要傳遞的參數放在 RouteSettings 中。

如果涉及到傳遞參數，那麼我們可以将參數放在 SecondScreen 的構造函數中，也可以放在構造的 MaterialPageRoute 的 RouteSettings 中。

pushNamed方式的實作最終調用的也是 push 方法，這中方法直接暴露了參數 Object arguments ，源碼如下：

使用pushNamed方式時，需要将路由注冊到路由表中，例如：

pop操作将棧頂路由出棧，入參為一個 object 類型的對象，出參為目前頁面關閉時傳回給上一個頁面的資料。

pop的源碼如下：

pop的使用非常簡單，例如：

兩個頁面之間跳轉，如果涉及到參數的傳遞，可以使用下面的方式：

擷取參數時，可以使用下面的方式：

所謂命名路由，就是給路由起一個名字，然後可以通過路由名字直接打開新的路由。這為路由管理帶來了一種直覺、簡單的方式，這和 Android 中的 ARrouter 頁面跳轉架構所定義的 path 非常的類似。

路由名稱按慣例使用類似路徑的結構，應用程式的首頁路由預設為“/”，例如，'/ home' 表示 HomeScreen， '/ login' 表示 LoginScreen。

要想使用命名路由，我們必須先提供并注冊一個路由表（routing table），這樣應用程式才知道哪個名稱與哪個路由Widget對應。路由表的定義如下：

它是一個Map， key 為路由的名稱，是個字元串；value是個builder回調函數，用于生成相應的路由Widget。我們在通過路由名稱入棧新路由時，應用會根據路由名稱在路由表中找到對應的WidgetBuilder回調函數，然後調用該回調函數生成路由widget并傳回。

例如，我們在建立 MaterialApp 的時候就有一個 routes 構造參數：

Flutter的路由注冊方式比較簡單，我們回到之前“計數器”的示例，然後在MyApp類的build方法中找到MaterialApp，添加routes屬性，代碼如下：

這樣，使用routes的方式我們就完成了路由表的注冊。現在，我們就可以通過路由名稱來打開新的路由。pushNamed跳轉的格式如下：

Navigator 除了pushNamed方法，還有pushReplacementNamed等其他管理命名路由的方法，讀者可以自行檢視API文檔。接下來我們通過路由名來打開新的路由頁，修改FlatButton的onPressed回調代碼：

在Flutter最初的版本中，命名路由是不能進行傳遞參數的，後來才支援了參數。例如，下面展示命名路由如何傳遞并擷取路由參數，首先，注冊一個路由：

然後，在路由頁通過RouteSetting對象擷取路由參數，例如：

然後，在打開路由時傳遞參數：