【备战春招】第5天 Flutter中路由和导航的创建和使用

课程名称：Flutter从入门到进阶 实战携程网App 一网打尽核心技术
课程章节：Flutter入门：基础知识十六讲
课程讲师：CrazyCodeBoy

课程内容

在 Flutter 中跟页面跳转有关的有两个类：Route 和 Navigator：

• Route，路由，在Flutter中通常用来表示应用的页面（Page），Route在Android中通常指一个Activity，在iOS中指一个ViewController；
• Navigator，是一个路由管理的widget，它通过一个栈来管理一个路由widget集合。通常当前屏幕显示的页面就是栈顶的路由，Navigator提供了一系列方法来管理路由栈。

通过 Navigator 实现页面的跳转

由于 Navigator 维护了一个路由 widget 的栈，可以通过 push() 和 pop()完成入栈和出栈的操作。

push()将给定的路由入栈（即打开新的页面），返回值是一个Future对象，用以接收新路由出栈（即关闭）时的返回数据。执行push()时，主要使用两个方法：一个是直接 push() 一个路由，另外一个是 pushNamed() 一个命名路由地址。

Navigator.push(context, MaterialPageRoute(builder: (BuildContext context)
 => UsualNavscreen()));
 
Navigator.of(context).pushNamed('/b');

pop()操作将栈顶路由出栈，入参为一个 object 类型的对象，出参为当前页面关闭时返回给上一个页面的数据。

Navigator.of(context).pop({"lat":43.821757,"long":-79.226392});

通过命名路由(指定一个由路由名构成的 Map)实现跳转

所谓命名路由，就是给路由起一个名字，然后可以通过路由名字直接打开新的路由。这为路由管理带来了一种直观、简单的方式，这和 Android 中的 ARrouter 页面跳转框架所定义的 path 非常的类似。

路由表是一个Map<String, WidgetBuilder>类型的集合，key 为路由的名称，是个字符串；value是个builder回调函数，用于生成相应的路由Widget。

void main() {
  runApp(MaterialApp(
    home: MyAppHome(), // becomes the route named '/'
    routes: <String, WidgetBuilder> {
      '/a': (BuildContext context) => MyPage(title: 'page A'),
      '/b': (BuildContext context) => MyPage(title: 'page B'),
      '/c': (BuildContext context) => MyPage(title: 'page C'),
    },
  ));
}

通过把路由的名字 push 给一个 Navigator 来跳转：

Navigator.of(context).pushNamed('/b');

MaterialPageRoute

MaterialPageRoute继承自PageRoute类，是Material组件库的一个Widget，它可以针对不同平台，实现与平台页面切换动画风格一致的路由切换动画。

• 对于Android，当打开新页面时，新的页面会从屏幕底部滑动到屏幕顶部；当关闭页面时，当前页面会从屏幕顶部滑动到屏幕底部后消失，同时上一个页面会显示到屏幕上。
• 对于iOS，当打开页面时，新的页面会从屏幕右侧边缘一致滑动到屏幕左边，直到新页面全部显示到屏幕上，而上一个页面则会从当前屏幕滑动到屏幕左侧而消失；当关闭页面时，正好相反，当前页面会从屏幕右侧滑出，同时上一个页面会从屏幕左侧滑入。