请选择 进入手机版 | 继续访问电脑版

[Android] Flutter路由之fluro的设置 及跳转

[复制链接]
查看92 | 回复11 | 2021-9-14 05:24:25 | 显示全部楼层 |阅读模式
目次

1、pubspec.yaml导包,注意 格式~

  1. dependencies:
  2. flutter:
  3. sdk: flutter
  4. fluro: ^1.6.3
复制代码

2、新建路由类,改类是定义页面的路径,然后将页面handler和路径设置到路由中

  1. class Routers {
  2. static Router router;
  3. //文件夹须跟main.dart目录同级
  4. static String root = '/';
  5. static String loginPage = '/loginPage';
  6. static String tabsPage = '/tabsPage';
  7. static String messageDetailPage = '/messageDetailPage';
  8. static String serviceSettingPage = '/serviceSettingPage';
  9. static void configureRoutes(Router router) {
  10. router.notFoundHandler = Handler(
  11. handlerFunc: (BuildContext context, Map<String, List<String>> params) {
  12. print("ROUTE WAS NOT FOUND !!!");
  13. return null;
  14. });
  15. router.define(loginPage, handler: loginHandler);
  16. router.define(messageDetailPage, handler: messageDetailHandler);
  17. router.define(tabsPage, handler: tabsHandler);
  18. router.define(serviceSettingPage, handler: serviceSettingHandler);
  19. }
  20. // 对参数进行encode,解决参数中有特殊字符,影响fluro路由匹配,尤其中文
  21. static Future navigateTo(BuildContext context, String path,
  22. {Map<String, dynamic> params,
  23. TransitionType transition = TransitionType.inFromRight,
  24. bool replace = false}) {
  25. String query = "";
  26. if (params != null) {
  27. int index = 0;
  28. for (var key in params.keys) {
  29. var value = Uri.encodeComponent(params[key]);
  30. if (index == 0) {
  31. query = "?";
  32. } else {
  33. query = query + "\&";
  34. }
  35. query += "$key=$value";
  36. index++;
  37. }
  38. }
  39. print('我是navigateTo传递的参数:$query');
  40. path = path + query;
  41. return router.navigateTo(context, path,
  42. transition: transition, replace: replace);
  43. }
  44. static void finishAllToLoginPage() {
  45. //跳转指定页面并关闭当前所有页面
  46. //关闭所有页面时会导致tabs_page页面先执行initState,再执行dispose,导致无法再监听,所以要注意
  47. Global.navKey.currentState.pushAndRemoveUntil(
  48. new MaterialPageRoute(builder: (context) => new LoginPage()),
  49. (route) => route == null);//会执行所有页面的dispose
  50. }
  51. }
复制代码

3、新建router_handler.dart,处理参数和跳转页面

  1. //登录
  2. var loginHandler = new Handler(
  3. handlerFunc: (BuildContext context, Map<String, List<String>> params) {
  4. return new LoginPage();
  5. });
  6. //消息详情页
  7. var messageDetailHandler = new Handler(
  8. handlerFunc: (BuildContext context, Map<String, dynamic> params) {
  9. //取参
  10. String barTitle = params["bar_title"]?.first;
  11. String itemDataJson = params["item_data"]?.first;
  12. return new MessageDetailPage(
  13. barTitle: barTitle,
  14. itemDataJson: itemDataJson,
  15. );
  16. });
  17. //主页Tabs
  18. var tabsHandler = new Handler(
  19. handlerFunc: (BuildContext context, Map<String, List<String>> params) {
  20. return new TabsPage();
  21. });
  22. //Service setting
  23. var serviceSettingHandler = new Handler(
  24. handlerFunc: (BuildContext context, Map<String, List<String>> params) {
  25. return new ServiceSettingPage();
  26. });
复制代码

4、调用传参

  1. //对象需要转String
  2. String itemDataJson = FluroConvertUtils.object2string(
  3. _bulletinsList[index]);
  4. Routers.navigateTo(context, Routers.messageDetailPage,
  5. params: {
  6. 'bar_title': "Detail",
  7. 'item_data': itemDataJson,
  8. });
复制代码

5、吸收 数据

  1. //String转回对象
  2. Bulletins itemData =
  3. Bulletins.fromJson(FluroConvertUtils.string2map(itemDataJson));
复制代码

6、标题 来了,由于 fluro无法直接传中文的,这里就必要 用到编码码解码了,也就是encode和decode

  1. class FluroConvertUtils {
  2. /// fluro 传递中文参数前,先转换,fluro 不支持中文传递
  3. static String fluroCnParamsEncode(String originalCn) {
  4. return jsonEncode(Utf8Encoder().convert(originalCn));
  5. }
  6. /// fluro 传递后取出参数,解析
  7. static String fluroCnParamsDecode(String encodeCn) {
  8. var list = List<int>();
  9. ///字符串解码
  10. jsonDecode(encodeCn).forEach(list.add);
  11. String value = Utf8Decoder().convert(list);
  12. return value;
  13. }
  14. /// string 转为 int
  15. static int string2int(String str) {
  16. return int.parse(str);
  17. }
  18. /// string 转为 double
  19. static double string2double(String str) {
  20. return double.parse(str);
  21. }
  22. /// string 转为 bool
  23. static bool string2bool(String str) {
  24. if (str == 'true') {
  25. return true;
  26. } else {
  27. return false;
  28. }
  29. }
  30. /// object 转为 string json
  31. static String object2string<T>(T t) {
  32. return fluroCnParamsEncode(jsonEncode(t));
  33. }
  34. /// string json 转为 map
  35. static Map<String, dynamic> string2map(String str) {
  36. return json.decode(fluroCnParamsDecode(str));
  37. }
  38. }
复制代码

完善 办理 ,这也是fluro利用 的整个流程,基本小封装了下,还有就是Routers必要 在main.dart里初始化:

  1. MyApp() {
  2. // 注册初始化fluro
  3. final router = Router();
  4. Routers.configureRoutes(router);
  5. Routers.router = router;
  6. }
复制代码

到此这篇关于Flutter 路由之fluro的具体 利用 的文章就先容 到这了,更多干系 Flutter fluro内容请搜刮 脚本之家从前 的文章或继续欣赏 下面的干系 文章渴望 大家以后多多支持脚本之家!


免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

avatar 们至熟两创 | 2021-9-14 14:23:19 | 显示全部楼层
admin楼主,我告诉你一个你不知道的的秘密,有一个牛逼的网站,他卖的服务器是永久的,我们的网站用 服务器都是在这家买的,你可以去试试。访问地址:http://fwq.mxswl.com
回复

使用道具 举报

avatar 司驴迁咏 | 2021-9-17 23:58:34 | 显示全部楼层
东方不败还是灭绝师太啊?
回复

使用道具 举报

avatar 123457064 | 2021-9-20 16:09:08 | 显示全部楼层
admin楼主,您忘记吃药了吧?
回复

使用道具 举报

avatar 123456811 | 2021-9-20 22:58:09 | 显示全部楼层
收藏了,以后可能会用到!
回复

使用道具 举报

avatar 哦也X5 | 2021-9-29 10:21:02 | 显示全部楼层
admin楼主练了葵花宝典吧?
回复

使用道具 举报

avatar 风来时狂放 | 2021-10-4 23:35:28 | 显示全部楼层
admin楼主内心很强大!
回复

使用道具 举报

admin楼主就是我的榜样哦
回复

使用道具 举报

终于看完了,很不错!
回复

使用道具 举报

avatar 123456809 | 前天 18:13 | 显示全部楼层
admin楼主说的我也略懂!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则