Flutter json解析和序列化

前言：

各位同学大家好，相信大家在学习和工作中请求服务单接口的返回的数据的时候 ,都会遇到json接卸和和序列化的问题 。其他端的语言都有很好用三方库和插件一键格式化我这边就不展开讲了，今天主要讲一下flutter中的json数据是怎么处理的

准备工作

flutter 环境或者dart环境都可以 具体环境搭建教程请大家去看我之前的文章

1简单的json

{
    "msg": "获取数据成功",
    "code": 200,
}

这是一直最简单的json格式的数据 没有过多的嵌套 一个简单的数据模型类就可以解决 我们看下dart 代码

class BackInfoBean {
  String msg;
  int code;

  BackInfoBean ({this.msg,this.code});
  factory BackInfoBean .fromJson(Map<String,dynamic> json) {
    return BackInfoBean (
      msg: json['msg'],
      code: json['code'],
    );
  }
}

具体调用

void main() {
  var json ={
    "msg": "获取数据成功",
    "code": 200,
};
  BackInfoBean _backInfoBean = BackInfoBean .fromJson(json);
  print("msg:   ---   > " + _backInfoBean .city);
  print("code:  ----  >" + _backInfoBean .code.toString());
}

查看输出结果

msg:   ---   > 获取数据成功
code:  ----  > 200

2 含有嵌套的 json

{
    "msg": "获取数据成功",
    "code": 200,
    "data":{
       "username":"高桥凉介"
      ,"password":"123456"
   }
}

这种结构比上一种就稍微复杂一点，但解析起来也很简单，发现 “data” 字段对应的那部分内容其实也是一个 json，那我们也可以用相同的方法对 “data” 字段进行处理，我们新建一个 Data类：

class Data{
  String username;
  String password;
  Data({this.username,this.password});
  factory Data.fromJson(Map<String,dynamic> json) {
    return Data(
      username: json['username'],
      password: json['password'],
    );
  }
}

然后我们修改一下BackInfoBean这个类

class BackInfoBean {
  String msg;
  int code;
 Data data;

  BackInfoBean ({this.msg,this.code});
  factory BackInfoBean .fromJson(Map<String,dynamic> json) {
    return BackInfoBean (
      msg: json['msg'],
      code: json['code'],
    data: json['data'] == null ? null : Data.fromJson(json['data'])
    );
  }
}
//内部类 
class Data{
  String username;
  String password;
  Data({this.username,this.password});
  factory Data.fromJson(Map<String,dynamic> json) {
    return Data(
      username: json['username'],
      password: json['password'],
    );
  }
}

我们把Data数据模型类写在 BackInfoBean的内部类里面
这里需要注意的是，由于 today 是自己定义的对象， json 解析返回的数据类型一定要匹配，并且，存在“today” 字段为空的情况，所以需要判空，下面的代码划重点：

 data: json['data'] == null ? null : Data.fromJson(json['data'])

具体调用

void main() {
  var json ={
    "msg": "获取数据成功",
    "code": 200,
};
  BackInfoBean _backInfoBean = BackInfoBean .fromJson(json);
 Data  _data=_backInfoBean .data;
  print("msg:   ---   > " + _backInfoBean .city);
  print("code:  ----  >" + _backInfoBean .code.toString());
  print("username:  ----  >" + _data.username);
 print("password:  ----  >" + _data.password);
}

输出结果

msg:   ---   > 获取数据成功
code:  ----  > 200
username:   ---   > 高桥凉介
password:  ----  > 123456

3含有列表的json

来看看结构

{
    "msg": "获取数据成功",
    "code": 200,
    "data": [
      {
        "id": 12,
        "name": "资深安卓工程师",
        "cname": "今日头条",
        "size": "D轮",
        "salary": "40K-60K",
        "username": "Kimi",
        "title": "HR",
        "page": "0"
      },
      {
        "id": 13,
        "name": "移动端架构师",
        "cname": "银汉游戏",
        "size": "B轮",
        "salary": "15K-20K",
        "username": "刘丽",
        "title": "人事主管",
        "page": "0"
      },
      {
        "id": 14,
        "name": "Java工程师",
        "cname": "37互娱",
        "size": "D轮",
        "salary": "25K-30K",
        "username": "Reiki",
        "title": "HR-M",
        "page": "0"
      },
      {
        "id": 16,
        "name": "iOS工程师",
        "cname": "银汉游戏科技公司",
        "size": "D轮",
        "salary": "15K-20K",
        "username": "马小玲",
        "title": "Java程序员",
        "page": "0"
      },
      {
        "id": 17,
        "name": "java工程师",
        "cname": "4399游戏科技有限公司",
        "size": "C轮",
        "salary": "15K-20k",
        "username": "马小玲",
        "title": "HR-M",
        "page": "0"
      }
    ]
  }

因为在 json 中含有 “[ ]”,这是一种并列的结构，并不需要键值来区分不同。这种结构解析起来也不复杂，其实也是一种嵌套。还是上面的流程，新建 Data类：

class Data {
    String cname;
    int id;
    String name;
    String page;
    String salary;
    String size;
    String title;
    String username;

    Data({this.cname, this.id, this.name, this.page, this.salary, this.size, this.title, this.username});

    factory Data.fromJson(Map<String, dynamic> json) {
        return Data(
            cname: json['cname'], 
            id: json['id'], 
            name: json['name'], 
            page: json['page'], 
            salary: json['salary'], 
            size: json['size'], 
            title: json['title'], 
            username: json['username'], 
        );
    }

    Map<String, dynamic> toJson() {
        final Map<String, dynamic> data = new Map<String, dynamic>();
        data['cname'] = this.cname;
        data['id'] = this.id;
        data['name'] = this.name;
        data['page'] = this.page;
        data['salary'] = this.salary;
        data['size'] = this.size;
        data['title'] = this.title;
        data['username'] = this.username;
        return data;
    }

由于是含有多个该对象，所以需要在 BackInfoBean 中 新建一个 List，并且泛型声明为 Data

class BackInfoBean {
  String msg;
  int code;
 List<Data>data;
  BackInfoBean ({this.msg,this.code，this.data});
  factory BackInfoBean .fromJson(Map<String,dynamic> json) {
   var tempData = json['data'] as List;
    List<Data> dataList = tempData .map((i) => Index.fromJson(i)).toList();
    return BackInfoBean (
      msg: json['msg'],
      code: json['code'],
     indexes: dataList
    );
  }
}

具体调用：

  Company2 company2=Company2.fromJson(jsondata);
   String msg=company2.msg;
    int code=company2.code;
   List  _getdata =company2.data;
   print("msg   --- >"+msg);
    print("code   --- >"+code.toString());
    print("_getdata   --- >"+_getdata.toString());

以上就是各种json数据的手动解析

插件解析json

接下我就介绍一些好用的插件（自动生成model类的插件）分享给大家

第一个插件 flutter json formt

只需要在android studio setting - plugins 里面搜索就行了 安装完成然后重启Android studio
我们创建新的dart类 按住键盘 alt+inster 键


QQ截图20200620000032.png

然后选择 flutter json formt


QQ截图20200620000043.png

我们 把json数据粘贴进去
QQ截图20200620000126.png

然后点击OK就行了

具体生成model如下

/// msg : "获取数据成功"
/// code : 200
/// data : [{"id":4,"name":"资深安卓工程师","cname":"今日头条","size":"D轮","salary":"40K-60K","username":"Kimi","title":"HR","page":"0"},{"id":5,"name":"资深安卓工程师","cname":"今日头条","size":"D轮","salary":"40K-60K","username":"Kimi","title":"HR","page":"0"},{"id":6,"name":"资深安卓工程师","cname":"今日头条","size":"D轮","salary":"40K-60K","username":"Kimi","title":"HR","page":"0"},{"id":7,"name":"资深安卓工程师","cname":"今日头条","size":"D轮","salary":"40K-60K","username":"Kimi","title":"HR","page":"0"},{"id":8,"name":"资深安卓工程师","cname":"今日头条","size":"D轮","salary":"40K-60K","username":"Kimi","title":"HR","page":"0"},{"id":9,"name":"资深安卓工程师","cname":"今日头条","size":"D轮","salary":"40K-60K","username":"Kimi","title":"HR","page":"0"},{"id":11,"name":"资深安卓工程师","cname":"今日头条","size":"D轮","salary":"40K-60K","username":"Kimi","title":"HR","page":"0"},{"id":12,"name":"资深安卓工程师","cname":"今日头条","size":"D轮","salary":"40K-60K","username":"Kimi","title":"HR","page":"0"},{"id":13,"name":"移动端架构师","cname":"银汉游戏","size":"B轮","salary":"15K-20K","username":"刘丽","title":"人事主管","page":"0"},{"id":14,"name":"Java工程师","cname":"37互娱","size":"D轮","salary":"25K-30K","username":"Reiki","title":"HR-M","page":"0"},{"id":16,"name":"iOS工程师","cname":"银汉游戏科技公司","size":"D轮","salary":"15K-20K","username":"王霞","title":"Java程序员","page":"0"},{"id":17,"name":"java工程师","cname":"4399游戏科技有限公司","size":"C轮","salary":"15K-20k","username":"王霞","title":"HR-M","page":"0"}]

class Company {
  String msg;
  int code;
  List<DataBean> data;

  static Company fromMap(Map<String, dynamic> map) {
    if (map == null) return null;
    Company companyBean = Company();
    companyBean.msg = map['msg'];
    companyBean.code = map['code'];
    companyBean.data = List()..addAll(
        (map['data'] as List ?? []).map((o) => DataBean.fromMap(o))
    );
    return companyBean;
  }

  Map toJson() => {
    "msg": msg,
    "code": code,
    "data": data,
  };
}

/// id : 4
/// name : "资深安卓工程师"
/// cname : "今日头条"
/// size : "D轮"
/// salary : "40K-60K"
/// username : "Kimi"
/// title : "HR"
/// page : "0"

class DataBean {
  int id;
  String name;
  String cname;
  String size;
  String salary;
  String username;
  String title;
  String page;

  static DataBean fromMap(Map<String, dynamic> map) {
    if (map == null) return null;
    DataBean dataBean = DataBean();
    dataBean.id = map['id'];
    dataBean.name = map['name'];
    dataBean.cname = map['cname'];
    dataBean.size = map['size'];
    dataBean.salary = map['salary'];
    dataBean.username = map['username'];
    dataBean.title = map['title'];
    dataBean.page = map['page'];
    return dataBean;
  }

  Map toJson() => {
    "id": id,
    "name": name,
    "cname": cname,
    "size": size,
    "salary": salary,
    "username": username,
    "title": title,
    "page": page,
  };
}

具体调用

            Company company=Company.fromMap(jsondata);
                 String msg=company.msg;
                 int code=company.code;
                 _getdatabean=company.data;
                 print("msg   --- >"+msg);
                 print("code   --- >"+code.toString());
                 print("_getdata   --- >"+_getdatabean.toString());

第二个插件 Dart classses from JSON

只需要在android studio setting - plugins 里面搜索就行了 安装完成然后重启Android studio
我们创建新的dart 类 按住键盘 alt+inster 键 如图


QQ截图20200620000842.png

然后选择 Dart classses from JSON


QQ截图20200620000817.png

我们把json数据粘贴进去 然后输入dart 类名
QQ截图20200620001331.png

然后我们选择 Cenerate

具体生成model 如下 :


class Company2 {
    List<Data>data;
    int code;
    String msg;
    Company2({this.data, this.code, this.msg});
    factory Company2.fromJson(Map<String, dynamic> json) {
        return Company2(
           data: json['data'] != null ? (json['data'] as List).map((i) => Data.fromJson(i)).toList() : null, 
            code: json['code'], 
            msg: json['msg'], 
        );
    }

    Map<String, dynamic> toJson() {
        final Map<String, dynamic> data = new Map<String, dynamic>();
        data['code'] = this.code;
        data['msg'] = this.msg;
        if (this.data != null) {
            data['data'] = this.data.map((v) => v.toJson()).toList();
        }
        return data;
    }
}

class Data {
    String cname;
    int id;
    String name;
    String page;
    String salary;
    String size;
    String title;
    String username;

    Data({this.cname, this.id, this.name, this.page, this.salary, this.size, this.title, this.username});

    factory Data.fromJson(Map<String, dynamic> json) {
        return Data(
            cname: json['cname'], 
            id: json['id'], 
            name: json['name'], 
            page: json['page'], 
            salary: json['salary'], 
            size: json['size'], 
            title: json['title'], 
            username: json['username'], 
        );
    }

    Map<String, dynamic> toJson() {
        final Map<String, dynamic> data = new Map<String, dynamic>();
        data['cname'] = this.cname;
        data['id'] = this.id;
        data['name'] = this.name;
        data['page'] = this.page;
        data['salary'] = this.salary;
        data['size'] = this.size;
        data['title'] = this.title;
        data['username'] = this.username;
        return data;
    }
}

具体调用：

  Company2 company2=Company2.fromJson(jsondata);
      String msg=company2.msg;
       int code=company2.code;
       _getdata=company2.data;
       print("msg   --- >"+msg);
        print("code   --- >"+code.toString());
      print("_getdata   --- >"+_getdata.toString());

以上就Android studio或者是idea 里面比较好用的插件 介绍给大家 还有其他更好用的插件/三方库（例如 JsonTodart 插件和 json_serializable 三方库 ）这边因为时间原因篇幅有限就不展开讲了 下次由机会再给大家好好讲讲

最后总结 ：

json数据 是前端 移动端 跨平台 平常 都会碰到的数据格式 这次就flutter的这一方面 介绍给大家几种常见的数据格式的解析和 两个好用的插件 希望能帮助到大家 ，有兴趣学的的同学可以私下多多交流 ，如果觉得文章还不错麻烦给个star 和转发 谢谢

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
禁止转载，如需转载请通过简信或评论联系作者。
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,884评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,347评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,435评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,509评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,611评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,837评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,987评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,730评论 0赞 267
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,194评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,525评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,664评论 1赞 340
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,334评论 4赞 330
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,944评论 3赞 313
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,764评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,997评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,389评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,554评论 2赞 349