阅读 520

Flutter路由插件-r_router(全面适配Navigator2.0)

1.简介

在开发Flutter开发的过程中,路由跳转页面是十分常见的,市面上也有许许多多的路由插件包,例如fluroff_annotation_routeroutermaster等等,但在个人使用上面,还是会有一些各种各样的不舒适,于是就开发了r_router这个插件包,我们来学习一下怎么使用吧!非常简单

github地址:github.com/rhymelph/r_…

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();
}));
复制代码
RRouter.setPathStrategy(true);
复制代码
  • 15.设置默认Page构造器(NAV2.0特有)

当我们需要更改过渡页面的动画持续时间时,我们可以使用RRoutersetPageBuilder方法

RRouter.setPageBuilder((ctx, builder, pageTransitionsBuilder) =>
    CustomPage<dynamic>(
        child: Builder(
            builder: (BuildContext context) => builder.call(context)),
        pageTransitionsBuilder: pageTransitionsBuilder,
        key: ValueKey(ctx.at.microsecondsSinceEpoch),
        name: ctx.path,
        arguments: ctx.toJson(),
        transitionDuration: Duration(milliseconds: 100),
        restorationId: ctx.path));
复制代码

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,结合RouterDelegateRouteInformationParser适配Navigator2.0.参考于jaguarDart服务器开发框架插件

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 通过命令行生成资源文件引用等

dart/Flutter交流群(Dart客栈-同订阅号):129380453

文章分类
前端