Flutter中fluro的详细使用
Flutter中fluro的详细使用
fluro是flutter中的路由管理,GitHub地址
[https://github.com/theyakka/fluro]:
库的使用
1.创建一个全局的的Router对象
import 'package:fluro/fluro.dart';
//全局对象
class Application {
static Router router;
}
2.在main.dart初始化
//创建
final router = new Router();
//绑定
Routes.configureRoutes(router);
//全局赋值
Application.router = router;
return MaterialApp(
debugShowCheckedModeBanner: false, //隐藏测试
onGenerateRoute:Application.router.generator, //注册路由
home: HomePage(), //跳转主页
);
3.常用的两个配置文件
3.1创建Routes.dart
//配置路由名称
class Routes {
static String root = '/'; //根路径
static String goodKtvList = '/good_ktv_list'; //路径地址
static String couponpage = '/couponpage';
static String koempage = '/koempage';
static String ktvinfopage = '/ktvinfo';
static void configureRoutes(Router router) {
router.notFoundHandler = new Handler(
handlerFunc: (BuildContext context, Map> params) {
print('ERROR====>ROUTE WAS NOT FONUND!!!');
});
router.define(goodKtvList, handler: GoodKtvListPageHanderl,transitionType: TransitionType.native );
router.define(couponpage, handler: CouponPageHanderl);
router.define(koempage, handler: KoemPageHanderl);
router.define(ktvinfopage, handler: KtvInfoPageHanderl);
}
//自定义的参数跳转
// 对参数进行encode，解决参数中有特殊字符，影响fluro路由匹配
static Future navigateTo(BuildContext context, String path, {Map params, TransitionType transition = TransitionType.native}) {
String query = "";
if (params != null) {
int index = 0;
for (var key in params.keys) {
var value = Uri.encodeComponent(params[key]);
if (index == 0) {
query = "?";
} else {
query = query + "\&";
}
query += "$key=$value";
index++;
}
}
print('我是navigateTo传递的参数：$query');
path = path + query;
return Application.router.navigateTo(context, path, transition:transition);
}
}
上面代码中transitionType是可以给页面进入时配置一个入场动画,他有下面11种
TransitionType.inFromLeft //左侧进入
TransitionType.inFromRight //右侧进入
TransitionType.inFromBottom //底部进入 默认入场动画
TransitionType.native //无进入动画
TransitionType.nativeModal //同上
TransitionType.fadeIn //渐显动画
TransitionType.custom //自定义
TransitionType.material //感觉和上面几种一样 无特别动画效果
TransitionType.materialFullScreenDialog //感觉和上面几种一样 无特别动画效果
TransitionType.cupertino //右进右出
TransitionType.cupertinoFullScreenDialog //底部进 底部出 下个页面返回值变化
3.2创建route_handler.dart
//每个页面对应一个handler
//首页 不传递参数
Handler GoodKtvListPageHanderl = Handler(
handlerFunc: (BuildContext context,Map> params){
return GoodKtvListPage();
}
);
3.3不带参数的界面跳转
Routes.navigateTo(context, Routes.goodKtvList);
3.4带字符窜参数传递
对应的handler
Handler GoodKtvListPageHanderl = Handler(
handlerFunc: (BuildContext context,Map> params){
String id = params['id']?.first;
print('--------Handerl接受参数---------->${id}');
return GoodKtvListPage(id:id);
}
);
//对应的传递方法
Routes.navigateTo(context, Routes.demoSimple,params: {
'id': "123456",
},);
//在页面中接受传递的参数
lass GoodKtvListPage extends StatefulWidget {
GoodKtvListPage({@required this.id}); //必传参数
final String id;
@override
_GoodKtvListPageState createState() => _GoodKtvListPageState();
}
class _GoodKtvListPageState extends State {
//可变界面需要在上面接受参数 底部用这种方式获取到传递的参数
print('----------传递的ID--------> ${widget.id}');
}
3.5传递对象类型参数
//创建对象
UserInfo userInfo =UserInfol('张三', 176, 60);
//转化为json字符窜
String jsonString = convert.jsonEncode(userInfoModel);
//跳转
Routes.navigateTo(context, Routes.demoSimple,params: {
'json': jsonString,
},);.then((result) {
// 通过pop回传的值，顶部返回则不会通过此处传值
});
//对应handler
Handler GoodKtvListPageHanderl = Handler(
handlerFunc: (BuildContext context,Map> params){
UserInfo _model1 =
UserInfo.fromJson(convert.jsonDecode(params['json'][0]));
print('--------Handerl接受参数---------->${id}');
return GoodKtvListPage(json:_model1);
}
);
//界面接受同上一样就不在描述
3.6界面的返回
//简单返回
Navigator.pop(context); 或 Navigator.of(context).pop();
//返回到根界面
Navigator.of(context).popUntil(ModalRoute.withName('/'));
//返回到指定界面
Navigator.of(context).popUntil(ModalRoute.withName('/test'));
//带值返回
Navigator.pop(context, result);
总结:通过资料发现fluro有很多种写法,以上是个人通过库的示例以及各资料总和整理出来的,在这里做个笔记方便以后查看,有什么不对或不足的地方请大家批评指正