Flutterapp页面路由以及路由拦截的实现

1、Flutterapp页面路由以及路由拦截的实现目录-为什么要使用路由Flutte路由介绍页面结构与逻辑实现关键代码页面路由跳转为什么要使用路由在之前我们的代码中，页面跳转使用的代码如下所示:avigator.of(context).puMaterialPageRoute(builder:textage在开发过程中，随着页面的增加，如果继续使用这种方式会有如下缺陷：代码耦合严重：涉及到页面跳转的地方就需要插入页面的构造函数，意味着需要知道其他页面的构建方式。不易维护：一旦某个页面发生了变化，需要将涉及到该页面的跳转全部改变。-权限控制不方便：假设某些页面需要授权后才可以访问，需要在各个地方插入权

2、限判断。Flutter路由介绍首先说一下，本篇的路由介绍是Flutter的实现方式，Flutter对路由做了很大的改动，使用了声明式方式重构了路由,使用起来会更为复杂。在Flutter)ateral提供了路由配置参数，当使用路由配置后，ateral的勾造形式如下所示：returateralpp其他参数aat全局导航状态eeerate路由改变响应方法ta初始化路由路径* aat是一个lale eerate为一个路由拦截器,a对象，用于全局存储导航的状态。当路由发生改变时，该方法会被调用，从而可以根据路由参数返回不同的页面,或者进行路由拦截。tal为初始化路由路径，一般为启动页或首页的路径。页面结

3、构与逻辑为了演示路由的使用，我们使用了四个页面： ppea首页，与之前的章节的页面框架一样，路由路径为；-pla:启动页，只有一个图片，实际使用过程可以用于加载引导页，广告或其他用途。页面停留秒后切换到首页。* :登录页，用于演示点击登录按钮通过路由切换到登录页。*tFun即页面，当路由表中没有匹配的路径时，跳转到40页面。这里的路由跳转分为了两种，一是从启动页跳转到首页，这种跳转不可返回的；二是正常的调整，可以点击返回按钮返回到上一级。在Flutte中提供不同的方法应对这两种情况。实现关键代码首先是路由表和路由拦截响应的实现，在ruter件夹新建rutertale.d,ai代码如下:prt&

4、#39;package:flutter/cupertino.dartport'package:flutter/material.dart'port/app.dart'port/login.dart'port/not_found.dart'port/splash.dart'classRouterTablestaticStringsplashPath='splash'staticStringloginPath='login'staticStringhomePath='/'staticStringnotF

5、oundPath='404'staticMap<String,WidgetBuilder>routeTables=/404页面notFoundPath:(context)=>NotFound(),/启动页splashPath:(context)=>Splash(),/登录loginPath:(context)=>LoginPage(),首页homePath:(context)=>AppHomePage(),;/路由拦截staticRouteonGenerateRoute<TextendsObject>(RouteSettingss

6、ettings)returnCupertinoPageRoute<T>(settings:settings,builder:(context)Stringname=;if(routeTablesname=null)name=notFoundPath;Widgetwidget=routeTablesname(context);returnwidget;,);这里全部使用了静态属性和静态方法，是为了可以直接从过类名访问属性和方法，而无需反复构建对象。这样，路由访问的时候也可以通过类名的静态属性直接访问，可以避免拼写错误。有了这个类了后，App的所有页面都可以通

7、过这个类集中管理，从而避免多处维护了。这里关键的是onGenerateRoute方法，该方法接收了一个RouteSettings对象，该对象会有个name属性包含路由路径名称，同时还有个arguments用于携带路由参数。可以通过这个属性来与路由表的页面进行匹配。若匹配到则返回相应的页面；若没有匹配到，则路由到404页面。同时，若需要做权限控制，也可以在这里拦截，比如定位到403页面或直接提醒无访问权限。接下来就是改造main.dart文件，在构建MaterialApp时使用对应的理由配置：import'package:flutter/material.dart'import&

8、#39;routers/router_table.dart'voidmain()runApp(MyApp();classMyAppextendsStatelessWidgetfinalGlobalKeynavigationKey=GlobalKey<NavigatorState>();overrideWidgetbuild(BuildContextcontext)returnMaterialApp(navigatorKey:navigationKey,onGenerateRoute:RouterTable.onGenerateRoute,initialRoute:Route

9、rTable.splashPath,);这里会发现在main.dart中我们无需再通过import引入相关的页面了，而是直接配置路由的配置属性即可。页面路由跳转页面路由跳转更为简便，在Flutter中的NavigatorState中分别提供了pushNamed方法和pushReplacementNamed方法，前者会在导航栏有返回按钮，后者是使用路由后的页面直接替换当前页面，适用于启动页的调整。在启动页中未来停留几秒，使用了一个定时器，在2秒后再进行跳转，实际可以用于做一些预加载资源的提示或者广告展示。overridevoiddidChangeDependencies()super.didCh

10、angeDependencies();if(!_initialized)_initialized=true;Timer(constDuration(milliseconds:2000),()Navigator.of(context).pushReplacementNamed(RouterTable.homePath););普通页面的跳转直接使用pushNamed即可，若要返回上一级，则使用pop方法。push和pop方法均可以携带参数，下一篇我们再来介绍如何处理路由参数。这里我们特意加了一个错误的路由演示404跳转：body:Center(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:ButtonUtil.primaryTextButton(登录'，()Navigator.of(context).pushNamed(RouterTable.loginPath);，context)，SizedBox(height:10，)，ButtonUtil.primar