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

rhyme_lph

发布于 2021-11-24 15:00:25

1K0

发布于 2021-11-24 15:00:25

文章被收录于专栏：Flutter&Dart

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('普通跳转'),
      ),
    );
  }
}