用户登录

路由信息有变化的时候,路由器要把这个路由信息转换成我们自定义的路由配置数据,路由器会把这个数据交给路由器代表使用,路由器代表会根据这个数据的值来修改应用的状态。路由器会使用路由信息解析器来转换路由信息,下面可以去定义一个路由信息解析器,再把它交给路由器使用。

在项目里新建一个文件,放在 lib/app/router 里面,名字是 app_route_information_parser.dart,在这个文件里定义一个类,名字叫  AppRouteInformationParser,让它继承一下 RouteInformationParser 路由信息解析器,解析之后生成的数据的类型是 AppRouteConfiguration,这个类型是之前我们自己定义的。

parseRouteInformation

在这个类里面要添加一个解析路由信息用的方法,名字叫 parseRouteInformation,方法有个参数,名字是 routeInformation。路由器会把路由信息交给这个路由信息解析器里的这个 parseRouteInformation 方法,这个 routeInformation 参数的值就是路由相关的信息,它里面有两个属性,location 还有 state,这个 location 属性的值就是访问的地址。

这里要用 async 标记一 下这个方法。然后我们要根据这个 routeInformation ,也就是路由信息,返回对应的路由配置数据。比如这里可以判断一下,如果 routeInformation 里的 location 是 /about,也就是访问的地址是 /about , 解析之后提供的东西就是用一下 AppRouteConfiguration.about() ,这个构造方法制造出来的这个路由配置里面会有个 pageName 属性,它的值会被设置成 About。

默认可以 return  AppRouteConfiguration.home(),用这个构造方法制造出来的 AppRouteConfiguration 里面,它的 pageName 的值会是一个空白的字符。

配置使用路由信息解析器

定义好这个解析器我们可以把它交给路由器使用,打开 app.dart,在这个 Router 里面,添加一个 routeInformationParser ,它的值可以新建一个 AppRouteInformationParser。 这里应用提示了一个错误,意思是说如果提供了 routeInformationParser,还得再提供一个 routeInformationProvider,这个 routeInformationProvider 是路由器获取路由信息用的。如果不打算定制它的话,我们可以使用 MaterialApp 的 router 这个构造方法创建一个路由器。

用一下 MaterialApp 的 router 方法,然后去掉 initialRoute 属性,再剪切一下这个 Router 里面的 routerDelegate 还有 routeInformationParser,删除掉这个 home 属性还有它的值。把剪切的东西粘贴到这里。

这里又会提示给 routerDelegate 提供的这个东西的类型有点问题,这是因为我们没有设置这个路由器代表的路由配置的类型,打开这个 AppRouterDelegate,设置一下这个 RouterDelegate 类型,设置成 AppRouteConfiguration。 保存一下文件。现在这里就不会再出现错误提示了。

测试

下面再打开这个 AppRouteInformationParser,在这个 parseRouteInformation 方法里面,在控制台上输出一行文字,解析路由信息 parseRouteInformation。下面可以再输出这个 routeInformation 参数里的 location 属性的值。

打开调试控制台,你会发现访问初始路由的时候,这里输出的这个 routeInformation 的 location 的值,会是一个 / 。 再试一下,在地址栏里输入一个 about ,访问一 下地址,路由信息发生了变化,路由器调用  AppRouteInformationParser 里的 parseRouteInformation 这个方法的时候,在控制台上输出的 routeInformation 的 location 的值会是 /about。

把路由信息转换成自定义的路由配置(parseRouteInformation)《 Flutter 2:路由导航 #2 》

统计

13799
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点