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