一個 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
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