Flutter路由插件-r_router（全面适配Navigator2.0）

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();
}));

• 14.设置非hash路径
  • 设置为true时，可以通过http://localhost:8080/index.html 直接访问
  • 设置为false时，只能通过http://localhost:8080/#/index.html 进行访问

RRouter.setPathStrategy(true);

• 15.设置默认Page构造器(NAV2.0特有)
  当我们需要更改过渡页面的动画持续时间时，我们可以使用RRouter的setPageBuilder方法

RRouter.setPageBuilder((ctx, builder, pageTransitionsBuilder) =>
    CustomPage(
        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));

• 16.设置只有一个路由栈时点击返回的回调(NAV2.0特有)

RRouter.setPopHome(() {
    //异步逻辑处理
    if(currentNow - lastTime > 2000){
       showToast(’再点击一次退出程序‘);
       return Future.value(true);
    }
    return Future.value(false);
}

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 {
  @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.参考于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