Flutter 控件之 Routes 和 Navigator. [PopupRoute]

一個 App 一般會有多個界面，每一個界面實現不一樣的功能，並在多個界面之間跳轉。在 Flutter 中多個界面的跳轉是經過 Navigator 來實現的。

在 Flutter 中定義了一個 Overlay Widget 用來管理多個界面，Overlay 裏面使用 Stack 來顯示當前的界面。一般不直接和 Overlay 打交道，而是使用 WidgetsApp 或者 MaterialApp 中的 Navigator 來管理界面。

好比在示例項目中https://github.com/goodev/learn_flutter 9.refactor 使用了 MaterialApp 的 routes 來定義多個界面以及每一個界面的 key。而後使用 Navigator.pushNamed(context, routeName); 來跳轉到具體的界面。

因此在 MaterialApp 中多頁面跳轉主要有兩個任務。

• 定義 routes
• 使用 Navigator 來跳轉界面

定義 routes

routes 是 MaterialApp 中的一個屬性，定義了全局的界面和每一個界面的 key。在 Navigator 中使用 key 來指定跳轉到具體的界面。 routes 的類型爲 Map<String, WidgetBuilder>，WidgetBuilder 是一個方法定義，該方法返回一個 Widget。

使用 Navigator

一般使用 Navigator.push 和 Navigator.pop 來顯示一個界面和刪除一個當前顯示的界面。 能夠把 Navigator 當作一個堆棧，裏面每一個 item 都是一個界面，若是要顯示一個界面，則使用 Navigator.push 把界面壓到堆棧中，最上面的界面就是用戶可見的界面；若是要移除最上面的界面，只須要調用 Navigator.pop 從堆棧中移除。

Navigator.push 的參數爲 Route，通常在 MaterialApp 中使用 MaterialPageRoute.在 MaterialPageRoute 中定義了 Route 所表明的界面的 Widget 信息。

若是使用 routes 定義了全局的路由信息，則能夠使用 Navigator.pushNamed 函數來顯示一個具體的界面。

定義各類路由

在 Flutter 中，像 對話框、菜單、Dropdown 下拉選項、BottomSheet 等都是經過顯示一個 Route 實現的。在 Flutter 中有三種路由：PopupRoute, ModalRoute, 和 PageRoute。 使用這些 路由能夠實現各類彈出界面的狀況。

============================================================================================================

 

 

PopupRoute<T> class

A modal route that overlays a widget over the current route.

 

https://docs.flutter.io/flutter/widgets/PopupRoute-class.html