Flutter路由插件-r_router(全面适配Navigator2.0)
2023-03-15 23:27:38 时间
1.简介
在开发Flutter开发的过程中,路由跳转页面是十分常见的,市面上也有许许多多的路由插件包,例如fluro
、ff_annotation_route
、routermaster
等等,但在个人使用上面,还是会有一些各种各样的不舒适,于是就开发了r_router
这个插件包,我们来学习一下怎么使用吧!非常简单
github地址:https://github.com/rhymelph/r_router
2.添加路由路径
添加路由路径我们只需要调用addRoute
方法
- 1.添加单个路由路径
RRouter.addRoute(NavigatorRoute(
'/', (ctx) => MyHomePage(title: 'Flutter Demo Home Page')));
- 2.连续添加多个路由路径
RRouter.addRoute(NavigatorRoute('/one', (ctx) => PageOne()))
.addRoute(NavigatorRoute('/two', (ctx) => PageTwo()));
//或者
RRouter.addRoutes([
NavigatorRoute('/one', (ctx) => PageOne()),
NavigatorRoute('/two', (ctx) => PageTwo())
]);
- 3.添加接收路径参数路由
RRouter.addRoute(NavigatorRoute(
'/three/:id', (ctx) => PageThree(id: ctx.pathParams.getInt('id'))));
- 4.路径参数通过正则限制(这里只接收数值类型)
RRouter.addRoute(NavigatorRoute(
'/three/:id',
(ctx) => PageThree(id: ctx.pathParams.getInt('id')),
pathRegEx: {'id': r'^[0-9]*$'},
));
- 5.全匹配
RRouter.addRoute(NavigatorRoute('/four/*', (context) => PageFour()));
- 6.自定义转场动画(默认会使用
FadeUpwardsPageTransitionsBuilder
)
RRouter.addRoute(NavigatorRoute('/five', (ctx) => PageFive(),
defaultPageTransaction: CupertinoPageTransitionsBuilder()));
//设置全部路由默认,也就是替换FadeUpwardsPageTransitionsBuilder
RRouter.setDefaultTransitionBuilder(ZoomPageTransitionsBuilder());
- 7.异步返回页面(需自行添加加载对话框)
RRouter.addRoute(NavigatorRoute('/six', (ctx) async {
Future.delayed(Duration(seconds: 2));
return PageSix();
}));
- 8.覆盖之前声明的路由
//后续插件可自动生成这个路由
RRouter.addRoute(NavigatorRoute('/', (ctx)=>HomePage()));
// 没有登录,重新设置第一页为登录页面
RRouter.addRoute(NavigatorRoute('/', (ctx) => LoginPage()),
isReplaceRouter: true);
- 9.路由可用于处理逻辑
RRouter.addRoute(NavigatorRoute('/baidu/*', (ctx) async {
await Future.delayed(Duration(seconds: 2));
return 'http://www.baidu.com';
}, responseProcessor: (Context ctx, dynamic result) {
launch(result);
// 可以添加返回值,只需要 return ,这个值就会在navigateTo 返回
}));
- 10.添加拦截器
//单路由路径添加
RRouter.addRoute(NavigatorRoute('/login', (ctx) => LoginPage(), interceptor: [
(ctx) {
if (isLogin) {
RRouter.navigateTo('/home');
return true;// 返回true为拦截
}
return false;
}
]));
//全局添加
RRouter.addInterceptor((ctx) async {
if (ctx.path == '/two') {
RRouter.navigateTo('/one', body: ctx.body);
return true;
}
return false;
});
- 11.添加路由观察器
//1. 添加单个
RRouter.addObserver(RRouterObserver());
//2. 添加多个
RRouter.addObserver(AnalysisObserver())
.addObserver(ServerReportObserver());
// 或者
RRouter.addObservers([
AnalysisObserver(),
ServerReportObserver(),
]);
- 12.设置错误页(500)和
Not Found Page
(404)
RRouter.setErrorPage(ErrorPageWrapper(
error:
(BuildContext context, FlutterErrorDetails flutterErrorDetails) =>
Center(
child: Text(
'Exception Page (${flutterErrorDetails.exceptionAsString()})',
),
),
notFound: (BuildContext context, Context ctx) => Material(
child: Center(
child: Text('Page Not found:${ctx.path}'),
),
)));
- 13.重定向页面
RRouter.addRoute(NavigatorRoute('/loginPage', (context) {
if(isLogin){
return Redirect(path: '/homePage');
}
return LoginPage();
}));
3.设置MaterialApp
- 使用Navigator1.0 (一般不适配网页的情况下使用)
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
navigatorObservers: [
//new
RRouter.observer,
//new
],
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
- 使用Navigator2.0(墙裂推荐使用)
return MaterialApp.router(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
routerDelegate: RRouter.delegate,
routeInformationParser: RRouter.informationParser,
);
4.路由跳转
- 1.简单跳转
RRouter.navigateTo('/one');
- 2.传隐式参数(传递的内容,在Flutter web限制需要可Json化)
RRouter.navigateTo('/two', body: {'param': '我是参数(支持实体类,实体需可JSON化)'});
- 3.传路径参数和查询参数
//路径参数
RRouter.navigateTo('/three/123');
//查询参数
RRouter.navigateTo('/four?id=123');
- 4.跳转可动态设置跳转动画
//该优先级较高,其次注册路由>=默认路由
RRouter.navigateTo('/five',pageTransitions: ZoomPageTransitionsBuilder());
- 5.替换模式(替换当前栈顶的路由)
//result 为替换的那个路由需要返回的内容
RRouter.navigateTo('/six',replace: true,result: '返回内容');
- 6.栈顶模式(只有当前路由不是要跳转的路由,才会触发)
RRouter.navigateTo('/seven',isSingleTop: true);
- 7.清空当前栈跳转
RRouter.navigateTo('/nine',clearTrace: true);
- 8.获取上一路由的返回值
//上个路由调用
RRouter.pop('123');
//当前路由的代码
final result = await RRouter.navigateTo('/ten');
print(result); // = 123
5.获取传值
在注册路由时,我们可以看到,每次都会有一个ctx
,这个就是上一个路由跳转的时候传递过来的信息,我们可以通过这个参数获取path params
,query params
,body
等这些信息,用于满足大部分需求
参数 | 介绍 |
---|---|
at | 跳转的时间 |
path | 路径 |
body | 隐式参数 |
pathParams | 路径参数 |
queryParams | 查询参数 |
isDirectly | 是否通过浏览器直接打开 |
//示例一:ctx - pathParams
//添加路由
RRouter.addRoute(NavigatorRoute('/one/:id', (ctx) => PageOne()));
//跳转
RRouter.navigateTo('/one/123');
final id = ctx.pathParams.getInt('id',0); // 获取路径参数
print(id); // = 123
//示例二:ctx - queryParams
//添加路由
RRouter.addRoute(NavigatorRoute('/one', (ctx) => PageOne()));
//跳转
RRouter.navigateTo('/one?id=123');
//ctx 获取值
final id = ctx.queryParams.getInt('id',0); // 获取查询参数
print(id); // = 123
//示例三:ctx - body
//添加路由
RRouter.addRoute(NavigatorRoute('/one', (ctx) => PageOne()));
//跳转
RRouter.navigateTo('/one',body:123);
//ctx 获取值
final id = ctx.body; // 获取隐式参数
print(id); // = 123
当然,在上面返回的PageOne
这个Widget
下,我们还可以通过BuildContext
获取ctx
class PageOne extends StatefulWidget {
@override
_PageOneState createState() => _PageOneState();
}
class _PageOneState extends State<PageOne> {
@override
Widget build(BuildContext context) {
final ctx = context.readCtx;//获取传参
return Scaffold(
appBar: AppBar(
title: Text('普通跳转'),
),
);
}
}
6. 无需context的展示对话弹框方法
支持下面的方法
- showRDialog
- showRCupertinoDialog
- showRCupertinoModalPopup
- showRAboutDialog
- showRMenu
- showRTimePicker
- showRGeneralDialog
- showRDatePicker
- showRDateRangePicker
- showRSearch
- showRModalBottomSheet
- showRLicensePage
7.结尾
上面是本篇文章的所有内容,主要记录插件如何使用。原理主要是基于RouteSettings
和它的派生类Page
,结合RouterDelegate
与RouteInformationParser
适配Navigator2.0.参考于jaguar
Dart服务器开发框架插件
8.更多内容
关于我的更多插件
-
r_router
路由跳转,可实现路由拦截,路由注册,无Context 跳转、弹对话框 -
r_logger
日志打印,突破控制台输出最大字数限制 -
r_upgrade
应用升级,Android可实现通知栏下载进度,热更新,增量更新,跳转到应用商店,跳转网页功能,IOS实现跳转App Store,跳转网页 -
r_scan
二维码/条形码扫码,可自定义扫码窗口 -
r_calendar
可完全自定义的日历插件,支持多选,连选,单选,切换同步,周/月视图切换等功能 -
r_dotted_line_border
可简单实现虚线边框,直接在Container
使用 -
r_album
实现简单同步相片到Android/IOS相册 -
fluct
通过命令行生成资源文件引用等
相关文章
- appium 解锁九宫格
- docker系列(二):镜像
- docker系列(一):docker基础与安装笔记
- 接口自动化测试(7)
- Git学习笔记:基础篇
- appium 原理解析
- 谷歌 Android 12 开发者预览 Beta 3 获通知中心小改动
- 谷歌语音助手新功能,无需先唤醒即可快速响应指令
- 8P升完iOS14.5准正式版后“重生”,说说我的真实体验
- ubantu18.04下Hadoop安装与伪分布式配置
- appium 遇到的坑
- 谷歌启动 Android 12 的下一个开发者预览版
- 谷歌放大招!安卓12预览版最后一次更新,2021年8月或问世
- iOS 有哪些迷惑的设计规范?
- iOS系统即将迎来升级,新功能备受欢迎,安卓用户只能干看着
- iOS15新功能来袭,让人惊喜让人忧,你们期待吗?
- 安卓8GB运存都表示卡顿了,为何苹果手机才4GB却一点不着急
- 谷歌大脑创始成员辞职,他也和Jeff Dean闹掰了
- 交互优化方案的流程是什么样的?来看高手的总结!
- B端设计师怎样发挥设计价值?来看京东高手的总结!