Flutter路由之fluro的配置及跳转
更新时间:2021年09月08日 11:35:30 作者:Jam_Chan
本文主要介绍了Flutter路由之fluro的配置及跳转,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
1、pubspec.yaml导包,注意格式~
dependencies: flutter: sdk: flutter fluro: ^1.6.3
2、新建路由类,改类是定义页面的路径,然后将页面handler和路径设置到路由中
class Routers { static Router router; //文件夹须跟main.dart目录同级 static String root = '/'; static String loginPage = '/loginPage'; static String tabsPage = '/tabsPage'; static String messageDetailPage = '/messageDetailPage'; static String serviceSettingPage = '/serviceSettingPage'; static void configureRoutes(Router router) { router.notFoundHandler = Handler( handlerFunc: (BuildContext context, Map<String, List<String>> params) { print("ROUTE WAS NOT FOUND !!!"); return null; }); router.define(loginPage, handler: loginHandler); router.define(messageDetailPage, handler: messageDetailHandler); router.define(tabsPage, handler: tabsHandler); router.define(serviceSettingPage, handler: serviceSettingHandler); } // 对参数进行encode,解决参数中有特殊字符,影响fluro路由匹配,尤其中文 static Future navigateTo(BuildContext context, String path, {Map<String, dynamic> params, TransitionType transition = TransitionType.inFromRight, bool replace = false}) { 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 router.navigateTo(context, path, transition: transition, replace: replace); } static void finishAllToLoginPage() { //跳转指定页面并关闭当前所有页面 //关闭所有页面时会导致tabs_page页面先执行initState,再执行dispose,导致无法再监听,所以要注意 Global.navKey.currentState.pushAndRemoveUntil( new MaterialPageRoute(builder: (context) => new LoginPage()), (route) => route == null);//会执行所有页面的dispose } }
3、新建router_handler.dart,处理参数和跳转页面
//登录 var loginHandler = new Handler( handlerFunc: (BuildContext context, Map<String, List<String>> params) { return new LoginPage(); }); //消息详情页 var messageDetailHandler = new Handler( handlerFunc: (BuildContext context, Map<String, dynamic> params) { //取参 String barTitle = params["bar_title"]?.first; String itemDataJson = params["item_data"]?.first; return new MessageDetailPage( barTitle: barTitle, itemDataJson: itemDataJson, ); }); //主页Tabs var tabsHandler = new Handler( handlerFunc: (BuildContext context, Map<String, List<String>> params) { return new TabsPage(); }); //Service setting var serviceSettingHandler = new Handler( handlerFunc: (BuildContext context, Map<String, List<String>> params) { return new ServiceSettingPage(); });
4、调用传参
//对象需要转String String itemDataJson = FluroConvertUtils.object2string( _bulletinsList[index]); Routers.navigateTo(context, Routers.messageDetailPage, params: { 'bar_title': "Detail", 'item_data': itemDataJson, });
5、接收数据
//String转回对象 Bulletins itemData = Bulletins.fromJson(FluroConvertUtils.string2map(itemDataJson));
6、问题来了,因为fluro无法直接传中文的,这里就需要用到编码码解码了,也就是encode和decode
class FluroConvertUtils { /// fluro 传递中文参数前,先转换,fluro 不支持中文传递 static String fluroCnParamsEncode(String originalCn) { return jsonEncode(Utf8Encoder().convert(originalCn)); } /// fluro 传递后取出参数,解析 static String fluroCnParamsDecode(String encodeCn) { var list = List<int>(); ///字符串解码 jsonDecode(encodeCn).forEach(list.add); String value = Utf8Decoder().convert(list); return value; } /// string 转为 int static int string2int(String str) { return int.parse(str); } /// string 转为 double static double string2double(String str) { return double.parse(str); } /// string 转为 bool static bool string2bool(String str) { if (str == 'true') { return true; } else { return false; } } /// object 转为 string json static String object2string<T>(T t) { return fluroCnParamsEncode(jsonEncode(t)); } /// string json 转为 map static Map<String, dynamic> string2map(String str) { return json.decode(fluroCnParamsDecode(str)); } }
完美解决,这也是fluro使用的整个流程,基本小封装了下,还有就是Routers需要在main.dart里初始化:
MyApp() { // 注册初始化fluro final router = Router(); Routers.configureRoutes(router); Routers.router = router; }
到此这篇关于Flutter 路由之fluro的具体使用的文章就介绍到这了,更多相关Flutter fluro内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
OnSharedPreferenceChangeListener详解及出现不触发解决办法
本文主要介绍 Android OnSharedPreferenceChangeListener的知识,在Android应用开发过程中会遇到监听器不触发事件问题,这里介绍了相应的解决办法2016-08-08android startActivityForResult的使用方法介绍
android startActivityForResult的使用方法介绍,需要的朋友可以参考一下2013-05-05android scrollview顶部渐渐消失实现实例详解
这篇文章主要为大家介绍了android scrollview顶部渐渐消失实现实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
最新评论