版权声明:本文为博主原创文章,未经博主允许不得转载。
https://www.jianshu.com/p/f79bf0fb213c
转载请标明出处:
https://www.jianshu.com/p/f79bf0fb213c
本文出自 AWeiLoveAndroid的博客
Flutter系列博文链接 ↓:
工具安装:
Flutter基础篇:
- 谷歌Flutter1.0正式版发布
- Flutter基础篇(1)-- 跨平台开发框架和工具集锦
- Flutter基础篇(2)-- 老司机用一篇博客带你快速熟悉Dart语法
- Flutter基础篇(3)-- Flutter基础全面详解
- Flutter基础篇(4)-- Flutter填坑全面总结
- Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备
- Flutter基础篇(6)-- 水平和垂直布局详解
- Flutter基础篇(7)-- Flutter更新错误全面解决方案(图文+视频讲解)
- Flutter基础篇(8)-- Flutter for Web详细介绍
- Flutter基础篇(9)-- 手把手教你用Flutter实现Web页面编写
- Flutter1.9升级体验总结(Flutter Web 1.9最新版本填坑指南)
Flutter进阶篇:
Dart语法系列博文链接 ↓:
Dart语法基础篇:
Dart语法进阶篇:
最近对路由做了封装,写了一个轻量级框架,让你轻松地使用路由,不再那么麻烦。任何页面都可以用,真的是方便快捷。已经传到了github,欢迎朋友们给个star
,感谢大家,希望能在帮助大家的同时,麻烦大家给个打赏买口水喝,谢谢大家。
开源仓库地址:https://github.com/AweiLoveAndroid/Flutter-learning/blob/master/FRouter/
一、目前路由使用中存在的问题
发送位置比较零散
接收也不太好维护
页面冗余代码比较多
二、FRouter轻量级路由框架的思路
针对以上路由存在的问题,我对路由做了一个封装,解决了路由存在的一些问题,把发送和接收路由做了统一处理,并且对不同的页面需求做了适应,让代码维护变得更间接明了,无论是在哪个页面都可以直接用
FRouter
操作路由了。
三、代码思路分析
首先针对不同的页面,做了适配处理,
1.是否为首页,如果是,就使用 MaterialApp
+ Scaffold
+ AppBar
组合,最后只需要传入对应的参数就可以轻松实现这个组合了,去掉了大量冗余重复代码,如果不是首页,就用Scaffold
+ AppBar
组合。
2.是否有AppBar,如果有就用Scaffold
+ AppBar
组合,如果没有就用自己传入的 child
属性(自己写的页面,没有标题栏的页面)。
3.路由管理统一使用FRouter
类进行管理。
比如下面的示例代码,我这个MainPage
是首页,我是用 FRouter(isFirstPage: true,...),这就表示当我创建FRouter
这个类对象的时候,实际上就创建了MaterialApp
+ Scaffold
+ AppBar
组合,这就是标准的首页的组件组合的方式,省去了一大堆没用的代码,当然我这里面也封装了很多其他的属性,你可以根据需要传入即可,这里不逐个演示了。这里的isShowAppBar: true,
属性表示显示AppBar
组件。
routers
属性表示使用命名路由时,需要设置的路由管理的一个Map
集合,child
属性就是我们自己的页面内容了,比如这里使用一个RaisedButton
按钮,我点击它发送路由,我可以使用 FRouter.sendRouter(context, '/pageone'); 命名路由,这里的/pageone
就是命名路由的名称,对应着routers
集合的key
。如果只是发一个普通的路由,没必要这么麻烦,直接使用 FRouter.sendRouterPage(context, PageOne()); 即可,这里的PageOne()
是我们要发送的目标页面。
发送数据:这里的'/pagetwo': (builder) => PageTwo('数据2'),
,实际上是给页面PageTwo
发送了一个String类型的字符串过去了,在PageTwo
的构造函数里面有一个String类型的字段,当然你也可以根据实际需要,给你的页面的构造函数的参数设置其他的参数类型,这里只是以String类做了一个示例。
// 使用示例代码
class MainPage extends StatefulWidget {
@override
MainPageState createState() => new MainPageState();
}
class MainPageState extends State<MainPage> {
@override
Widget build(BuildContext context) {
// 首页 isFirstPage: true,
return FRouter(
isFirstPage: true,
isShowAppBar: true,
routes: {
// 不传递数据
'/pageone': (builder) => PageOne(),
// 传递数据给PageTwo这个页面
'/pagetwo': (builder) => PageTwo('数据2'),
'/pagethree': (builder) => PageThree('数据3'),
},
appBarTitle: Text('Hello World'),
child: RaisedButton(
onPressed: () {
// 命名路由
FRouter.sendRouter(context, '/pageone');
// 发送路由到新页面
// FRouter.sendRouterPage(context, PageOne('data'));
},
child: Text('点击进行跳转'),
),
);
}
}
4.接下来看看目标页面的处理。
PageOne 页面构建的时候,同样使用FRouter
,这里需要注意的是,它不是首页,所以不需要设置isFirstPage
属性(默认就是false 非首页),我点击按钮返回上个页面的时候,使用FRouter.backPageRouter(context);
即可。是不是很方便,全部都用的是 FRouter
来统一管理。
class PageOne extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 非首页 isFirstPage: false, 默认就是非首页
return FRouter(
isShowAppBar: true,
appBarTitle: Text(),
child: RaisedButton(
onPressed: () {
// 返回到上个页面
FRouter.backPageRouter(context);
},
child: Text('点击进行跳转'),
),
);
}
}
PageTwo 页面构建的时候,同样使用FRouter
,这里需要注意的是,这个页面显示AppBar,所以可以设置isShowAppBar:true
属性(默认就是true 显示,如果需要显示AppBar,那么这个属性可写可不写),我点击按钮返回上个页面的时候,要传递一个数据给上个页面可以,使用FRouter.backPageRouter(context,'返回给上个页面的数据');
即可,参数2是我们需要传递的数据,可以是基本类型,也可以是一个对象,实体类等类型。
class PageTwo extends StatelessWidget {
String data;
PageTwo(this.data);
@override
Widget build(BuildContext context) {
return FRouter(
isShowAppBar: true,
appBarTitle: Text('PageTwo'),
child: RaisedButton(
onPressed: () {
// 返回数据给上个页面
FRouter.backPageRouter(context,'返回给上个页面的数据');
},
child: Text('点击进行跳转'),
),
);
}
}
PageThree 这里面做了一点变化:isShowAppBar: false,
,表示不显示 AppBar,那么这时候就不会显示AppBar了,仅仅只显示自己想要的页面内容(child属性即自己的内容)。
class PageThree extends StatelessWidget {
String data;
PageThree(this.data);
@override
Widget build(BuildContext context) {
// 不显示AppBar
return FRouter(
isShowAppBar: false,
child: RaisedButton(
onPressed: () {
FRouter.backPageRouter(context);
},
child: Text('点击进行跳转'),
),
);
}
}
网友评论