暂无图片
暂无图片
暂无图片
暂无图片
暂无图片

Flutter2.*_路由管理

燕山雷震子 2021-11-02
476

    Flutter应用中常常涉及到页面的切换跳转,也叫做页面的导航管理,跟原生开发类似,导航器中存在一个路由栈,以入栈和出栈来对应页面的打开和关闭。


MaterialPageRoute


    

    我们默认使用Material系组件库,对于路由切换有一个抽象类PageRoute,表示占有整个屏幕空间的模态路由页面,这个类还定义类路由构建以及切换时过渡动画的相关接口及属性。MaterialPageRoute继承自PageRoute,针对不同平台它可以实现页面切换时动画风格一致的效果,MaterialPageRoute构造函数如下:

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

    ·builder:返回WidgetBuilder类型,也就是路由实例,作用为构建路由页面具体内容;

    ·settings: 路由的配置信息,路由名称、是否为初始路由;

    ·maintainstate: 入栈时默认情况下,原来的路由页面会保存在内存中,若希望在路由没用的时候释放它所占用的资源可以设置该字段为false;

    ·fullscreenDialog:  标识新的路由页面是否是一个全屏的模态对话框;

    需要注意的是对于android,打开新页面时,新页面从屏幕底部滑动至屏幕顶部,关闭时由屏幕顶部滑动至屏幕底部消失,同时上一个页面会显示到当前屏幕;对于ios,当打开页面时,新的页面会从屏幕右侧边缘一直滑动到屏幕左边,直到新页面全部显示到屏幕上,而上一个页面则会从当前屏幕滑动到屏幕左侧而消失;当关闭页面时,当前页面会从屏幕右侧滑出,同时上一个页面会从屏幕左侧滑入。

        

Navigator



    有了路由页面,理所当然的我们需要路由管理的工具,来提供打开和退出路由页面的方法,Navigator便是其中之一。Navigator通过一个栈来管理活动路由的集合,默认以当前屏幕显示的页面为栈顶的路由页面,Navigator使用push和pop方法来完成路由入栈、出栈,方法定义如下:

    ·Future push(BuildContext context, Route route)

    ·bool pop(BuildContext context, [ result ])

    Future对象用来接受路由页面关闭入栈时返回的数据,想必熟悉java的看官不会陌生,其含义是一样的。BuildContext为构建上下文,widget构建的若干信息存于其中,context的静态方法对应一个Navigator的实例方法,Navigator.push(BuildContext context, Route route) <=>Navigator.of(context).push(Route route);

    pop方法的参数[result]为出栈关闭路由页面时,被关闭页面要返回给上一个页面的数据;


路由传值



    实际开发中,我们需要在路由页面跳转时带一些参数数据,因为篇幅问题,我们来看一下代码的截图,外加一些讲解来理解这个处理:

大致为一个无状态的widget,包含一个raisedbutton按钮,点击这个按钮使用路由导航打开第二个路由页面TipRoute,TipRoute使用构建参数text将我们需要传递的参数值传递至第二个路由页面,也就是TipRoute,同时使用result接受管理器执行出栈返回的数据并print模拟打印log记录,下面来看一下TipRoute的代码:

TipRoute构建参数中使用text接受传递数据并展示,同样使用RaisedButton组件定一个onPressed事件执行导航管理器出栈,将返回数据回传至移除当前路由页面关闭后位于栈顶的路由页面RouterTestRoute;


命名路由



    意为命名的路由页面,然后采用通过管理路由名字直接完成路由跳转,以更直观,使用命名路由需要提供一个路由表routing table,定义为:

Map<String, WidgetBuilder> routes;value的WidgetBuilder为管理器buidler回调函数,用于生成相应的路由widget。


路由表注册



    在入口类中完成路由表注册,使用initialRoute
属性来定义默认路由,实例代码中使用"/"为默认路由页面:

    当注册路由表之后,便可以使用Navigator的pushNamed方法以路由名跳转至指定路由页面:Future pushNamed(BuildContext context, String routeName,{Object arguments});


    那么已经使用命名路由做页面跳转了,是否可以支持参数传递呢?那是肯定的,我们使用MaterialPageRoute的RouteSettings获取路由参数,获取形式为:var args=ModalRoute.of(context).settings.arguments;传递参数时处理为:Navigator.of(context).pushNamed("route_page_name", arguments:"some args");


路由钩子



    在涉及页面控权等需要场景时,使用MaterialApp的onGenerateRoute可以处理Navigator.pushNamed时面对未在路由表中注册的页面,但是需要注意的是onGenerateRoute函数只对命名路由生效,其回调函数签名:

Route<dynamic> Function(RouteSettings settings)

实例代码:

MaterialApp(
... //
onGenerateRoute:(RouteSettings settings){
return MaterialPageRoute(builder: (context){
String routeName = settings.name;
// 如果访问的路由页需要登录,但当前未登录,则直接返回登录页路由,
// 引导用户登录;其它情况则正常打开路由。
}
);
});


结语


    

    以上即为关于flutter的路由管理,如果希望了解更多关于路由处理方面的信息,还需要多多翻阅框架代码和api文档。当然如果各位看官有疑惑的点,可以私信雷记或者加入讨论组一起讨论。

文章转载自燕山雷震子,如果涉嫌侵权,请发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。

评论