前言：

各位同學大家好，相信大家在學習和工作中請求服務單接口的返回的數據的時候 ,都會遇到json接卸和和序列化的問題。其他端的語言都有很好用三方庫和插件一鍵格式化我這邊就不展開講了，今天主要講一下flutter中的json數據是怎么處理的

準備工作

flutter 環(huán)境或者dart環(huán)境都可以具體環(huán)境搭建教程請大家去看我之前的文章

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"
   }
}

這種結構比上一種就稍微復雜一點，但解析起來也很簡單，發(fā)現(xiàn) “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 中含有 “[ ]”,這是一種并列的結構，并不需要鍵值來區(qū)分不同。這種結構解析起來也不復雜，其實也是一種嵌套。還是上面的流程，新建 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
我們創(chuàng)建新的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
我們創(chuàng)建新的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的這一方面介紹給大家?guī)追N常見的數據格式的解析和兩個好用的插件希望能幫助到大家，有興趣學的的同學可以私下多多交流，如果覺得文章還不錯麻煩給個star 和轉發(fā) 謝謝

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Flutter json解析和序列化

Flutter json解析和序列化

前言：

準備工作

1簡單的json

具體調用

查看輸出結果

2 含有嵌套的 json

具體調用

輸出結果

3含有列表的json

具體調用：

插件解析json

第一個插件 flutter json formt

具體調用

第二個插件 Dart classses from JSON

具體調用：

最后總結：

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Flutter json解析和序列化

前言：

準備工作

1簡單的json

具體調用

查看輸出結果

2 含有嵌套的 json

具體調用

輸出結果

3含有列表的json

具體調用：

插件解析json

第一個插件 flutter json formt

具體調用

第二個插件 Dart classses from JSON

具體調用：

最后總結 ：

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

最后總結：