文章目录
- 1 .概念介绍
- 2. 实现方法
- 3. 示例代码
我们在上一章回中介绍了在页面之间共传递数据相关的内容,本章回中将介绍如何拦截路由.闲话休提,让我们一起Talk Flutter吧。
1 .概念介绍
本章回中介绍的路由拦截是指在路由运行过程中,对路由做一些处理。在Flutter中通过路由来实现页面之间的跳转,如果想在跳转过程中做一些事情怎么办呢?那么就
需要路由拦截了。本章回中将详细介绍如何实现路由拦截。
2. 实现方法
通常情况下路由都存放在MaterialApp组件的routes属性中,我们也叫它路由表,该表中的内容明确指出了路由的方向,如果遇到一些不在路由表中的路由,不知道它
的方向,那么就可以对这种路由进行拦截。MaterialApp组件提供了两个属性:onGenerateRoute和onUnknownRoute。这两个属性都是方法类型,详细如下:
- 方法返回的值就是路由的方向,或者说路由跳转到的页面;
- 方法的参数中包含路由参数中内容,比如路由名称,路由参数等;
- onGenerateRoute属性优先于onUnknownRoute执行;
- 如果onGenerateRoute属性已经拦截了路由,那么onUnknownRoute属性不再重复拦截;
最后我在强调一下,这两个属性对应的方法只能拦截不在路由表中的路由,而且需要和pushNamed方法配合使用才可以。稍后我们将通过示例代码来演示。
3. 示例代码
///主要用来拦截不在routes属性中定义的路由,需要和pushNamed方法配合使用才能回调该属性对应的方法
onGenerateRoute:(settings) {
if(settings.name == 'SecondRouter') {
debugPrint('setting: ${settings.toString()}');
return MaterialPageRoute(builder: (context){
return SecondRouter(data: 'data from home');
},
///如果路由中包含参数,一定要给这个属性赋值,不然路由中的参数为null
settings: settings);
}else {
debugPrint('setting: ${settings.toString()}');
return null;
}
},
///主要用来拦截不在routes属性中定义的路由,需要和pushNamed方法配合使用才能回调该属性对应的方法
///优先级低于onGenerateRoute,只有onGenerateRoute方法返回Null时才回调此属性对应的方法
onUnknownRoute: (settings) {
debugPrint('unknown setting: ${settings.toString()}');
return MaterialPageRoute(builder: (context){
///这里可以创建一个未知错误的界面,遇到未知路由则跳转到该界面
return SecondRouter(data: 'data from home');
});
},
onPressed: () {
debugPrint('second router clicked');
///创建两个路由,SecondRouter不会被拦截,因为routers属性对应的路由表中有该属性
///ThirdRouter会被拦截,因它不在路由表中,先是onGenerateRoute拦截,但是没有处理,转到onUnknownRoute中
Navigator.pushNamed(context, 'SecondRouter',arguments: 'data from arguments');
Navigator.pushNamed(context, 'ThirdRouter',arguments: 'data from arguments');
}
上面的代码中给出了路由拦截的代码,并且添加了详细的注释。onPressed属性中的代码可以放到Button中,这样可以在点击按钮的时候进行通过路由来跳转。代码中
拦截拦截路由后只打印出了路由中的参数,大家可以依据项目需求在这里添加一些业务逻辑。这里只列出了核心代码,完整的代码可以到Github上查看main.dart文件。
看官们,关于"如何拦截路由"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!