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

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 中有三種路由:PopupRouteModalRoute, 和 PageRoute。 使用這些 路由可以實現各種彈出界面的情況。


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

 

 

PopupRoute<T> class

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

 

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

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM