Flutter入门-路由导航

Flutter入门系列连载：

• Flutter入门-路由导航-本文对应代码链接

什么是路由？

首先什么是路由，路由对于移动开发者来说就是页面，比如对于我们Android开发者来说就是 Activity A-> ActivityB，类似ios中的 ViewController。

而人们常常说起的路由管理，就是管理页面之间如何跳转，通常也可被称为导航管理。

例如：

MaterialPageRoute

MaterialPageRoute 继承自 PageRoute类，是 Material 组件库提供的组件，针对不同平台，其有不同的路由动画效果。

其中PageRoute 是一个抽象类，表示占有整个屏幕空间的一个模态路由页面，其定义了路由构建及切换过渡动画的接口及属性。

MaterialPageRoute({
    WidgetBuilder builder,
    RouteSettings settings,
    bool maintainState = true,
    bool fullscreenDialog = false,
  })

• builder 用于构建路由页面的具体内容
• Settings 包含路由的基本配置信息，如名称，是否为初试路由页(首页)
• maintainState 默认打开一个新页面时，保存当前原路由信息。设置为false时，在入栈新页面时，释放当前原路由所占用的资源
• fullscreenDialog 新路由是否是一个全屏的模态对话框，例如在ios中，如果为true,则新页面从屏幕底部滑入，而不是水平。

MaterialPageRoute对于不同平台，定义了不同的路由动画效果。

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

如果想自定义路由动画，可以继承 PageRoute 来实现。

Navigator

Navigator 是一个路由导航组件，提供了打开和退出路由的方法，Navigator 内部通过栈来管理活动路由集合。通常当前屏幕显示的页面就是栈顶路由。Navigator 提供了一系列方法来管理路由栈。

Navigator 类中第一个参数为 context 的静态方法 都对应着一个 Navigaor 的实例方法.比如:

Navigator.push(BuildContext context,Route route)
 //等同于
Navigator.of(context).push(Route route)

常用 api

• push 将给定的路由入栈，即打开新的页面，返回值是一个 Future 对象，用以接收新路由出栈(即关闭)时的返回数据。
• pop(BuildContext context,[ result ]) 将栈顶路由出栈，result 页面关闭返回给上一个页面的数据
• maybePop 判断页面是否可以返回上一页，如果可以直接返回，否则什么都不做；
• canPop 判断是否可以返回上个页面；
• removeRoute 表示从Navigator中 删除路由，同时释放Route自身资源，路由的生命周期结束；
• removeRouteBelow 表示从Navigator 中删除指定路由下的路由，同时释放其资源，比如 A->B->C，路由栈存在三个页面, 当前处于C，传入B，则删除A，并释放其资源 ；
• replace 将Navigator中指定的路由替换为新的路由；
• replaceRouteBelow 将Navigator中指定的路由下的路由替换为新的路由。比如A-B-C，路由栈中存在三个页面，此时处于C,传入C，则替换B页面为指定新路由页；

示例

路由传值

用于在路由跳转时携带一些参数，比如打开某个新闻详情页时，我们需要携带 新闻id,这样才能具体知道显示什么。

示例

接收端

 onPressed: () async {
            var result = await Navigator.push<String>(context,
                MaterialPageRoute(builder: (context) {
              return xxxWidget();
            }));
   					//result即为回传的数据
 },

发送端

 Navigator.of(context).pop("我是返回的数据");

参考资料

Flutter实战-书籍