Flutter路由之fluro的配置及跳转

目录

  • 1、pubspec.yaml导包,注意格式~
  • 2、新建路由类,改类是定义页面的路径,然后将页面handler和路径设置到路由中
  • 3、新建router_handler.dart,处理参数和跳转页面
  • 4、调用传参
  • 5、接收数据
  • 6、问题来了,因为fluro无法直接传中文的,这里就需要用到编码码解码了,也就是encode和decode
【Flutter路由之fluro的配置及跳转】
1、pubspec.yaml导包,注意格式~
dependencies:flutter:sdk: flutterfluro: ^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> 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 params,TransitionType transition = TransitionType.inFromRight,bool replace = false}) {String query = ""; if (params != null) {int index = 0; for (var key in params.keys) {var value = https://www.it610.com/article/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> params) {return new LoginPage(); }); //消息详情页var messageDetailHandler = new Handler(handlerFunc: (BuildContext context, Map params) {//取参String barTitle = params["bar_title"]?.first; String itemDataJson = params["item_data"]?.first; return new MessageDetailPage(barTitle: barTitle,itemDataJson: itemDataJson,); }); //主页Tabsvar tabsHandler = new Handler(handlerFunc: (BuildContext context, Map> params) {return new TabsPage(); }); //Service settingvar serviceSettingHandler = new Handler(handlerFunc: (BuildContext context, Map> params) {return new ServiceSettingPage(); });


4、调用传参
//对象需要转StringString itemDataJson = FluroConvertUtils.object2string(_bulletinsList[index]); Routers.navigateTo(context, Routers.messageDetailPage,params: {'bar_title': "Detail",'item_data': itemDataJson,});


5、接收数据
//String转回对象Bulletins itemData =https://www.it610.com/article/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(); ///字符串解码jsonDecode(encodeCn).forEach(list.add); String value = https://www.it610.com/article/Utf8Decoder().convert(list); return value; }/// string 转为 intstatic int string2int(String str) {return int.parse(str); }/// string 转为 doublestatic double string2double(String str) {return double.parse(str); }/// string 转为 boolstatic bool string2bool(String str) {if (str =='true') {return true; } else {return false; }}/// object 转为 string jsonstatic String object2string(T t) {return fluroCnParamsEncode(jsonEncode(t)); }/// string json 转为 mapstatic Map string2map(String str) {return json.decode(fluroCnParamsDecode(str)); }}

完美解决,这也是fluro使用的整个流程,基本小封装了下,还有就是Routers需要在main.dart里初始化:
MyApp() {// 注册初始化flurofinal router = Router(); Routers.configureRoutes(router); Routers.router = router; }

到此这篇关于Flutter 路由之fluro的具体使用的文章就介绍到这了,更多相关Flutter fluro内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

    推荐阅读