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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • android自定义Dialog弹框和背景阴影显示效果

    android自定义Dialog弹框和背景阴影显示效果

    这篇文章主要为大家详细介绍了android自定义Dialog弹框和背景阴影显示效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • Android开发Compose集成高德地图实例

    Android开发Compose集成高德地图实例

    这篇文章主要为大家介绍了Android开发Compose里使用高德地图实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • android popwindow实现左侧弹出菜单层及PopupWindow主要方法介绍

    android popwindow实现左侧弹出菜单层及PopupWindow主要方法介绍

    PopupWindow可以实现浮层效果,主要方法有:可以自定义view,通过LayoutInflator方法;可以出现和退出时显示动画;可以指定显示位置等感兴趣的朋友可以了解下哦,希望本文对你学习android菜单相关开发有所帮助
    2013-01-01
  • React-Native  Android 与 IOS App使用一份代码实现方法

    React-Native Android 与 IOS App使用一份代码实现方法

    这篇文章主要介绍了React-Native Android 与 IOS App使用一份代码实现方法的相关资料,这里举例说明,该如何实现IOS和Android APP 都使用一样的代码,需要的朋友可以参考下
    2016-12-12
  • Android自定义View仿支付宝输入六位密码功能

    Android自定义View仿支付宝输入六位密码功能

    跟选择银行卡界面类似,也是用一个PopupWindow,不过输入密码界面是一个自定义view,当输入六位密码完成后用回调在Activity中获取到输入的密码并以Toast显示密码。这篇文章主要介绍了Android自定义View仿支付宝输入六位密码功能的相关资料,需要的朋友可以参考下
    2016-10-10
  • Android自动测试工具Monkey的实现方法

    Android自动测试工具Monkey的实现方法

    本文主要介绍Android Monkey 实现方法,Monkey测试是一种为了测试软件的稳定性、健壮性的快速有效的方法,具有非常重要的参考价值,希望对小伙伴有所帮助
    2016-07-07
  • Android中TextView显示插入的图片实现方法

    Android中TextView显示插入的图片实现方法

    这篇文章主要介绍了Android中TextView显示插入的图片实现方法,结合实例形式分析了TextView三种显示插入图片的实现技巧,需要的朋友可以参考下
    2016-08-08
  • Android实现多点触控功能

    Android实现多点触控功能

    这篇文章主要为大家详细介绍了Android实现多点触控功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • Android开发之ProgressDialog进度对话框用法示例

    Android开发之ProgressDialog进度对话框用法示例

    这篇文章主要介绍了Android开发之ProgressDialog进度对话框用法,简单介绍了ProgressDialog进度对话框常见函数功能,并结合实例形式分析了ProgressDialog组件创建及使用进度对话框相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • Android进阶之从IO到NIO的模型机制演进

    Android进阶之从IO到NIO的模型机制演进

    这篇文章主要为大家介绍了Android进阶之从IO到NIO的模型机制演进详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01

最新评论