6.1-Flutter中Json解析和模型转换

Json解析和复杂模型转换实用技巧

应该使用哪种JSON序列化方式

• 小型项目:手动序列化;
• 大型项目借助插件生成json_serializable和built_value;

如何序列化

http://www.devio.org/io/flutter_app/json/test_common_model.json

{
  "icon": "http://www.devio.org/io/flutter_app/img/ln_food.png",
  "title": "美食林",
  "url": "https://m.ctrip.com/webapp/you/foods/address.html?new=1&ishideheader=true",
  "statusBarColor": "19A0F0",
  "hideAppBar": true
}
解析:
Map map = JSON.decode(jsonStr);
print('icon':${map['icon']})
print('title':${map['title']})

将Map转换成model

class CommonModel {
  final String icon;
  final String title;
  final String url;
  final String statusBarColor;
  final bool hideAppBar;

  CommonModel({this.icon, this.title, this.url, this.statusBarColor,
    this.hideAppBar});

  factory CommonModel.fromJson(Map json){
    return CommonModel(
        icon: json['icon'],
        title: json['title'],
        url: json['url'],
        statusBarColor: json['statusBarColor'],
        hideAppBar: json['hideAppBar']);
  }

}

复杂JSON解析

如何解析对象中的数组

{
    "url":"xxx",
    "tabs":[
        {
            "labelName":"推荐",
            "groupChannelCode":"tourphoto_global1"
        },
        {
            "labelName":"拍照技巧",
            "groupChannelCode":"tab—photo"
        }
    ]
}

解析:

class TravelTabModel {
  String url;
  List tabs;

  TravelTabModel({this.url, this.tabs});

  TravelTabModel.fromJson(Map json){
    url = json['url'];
    //先将tabs转化成List，再将List中的值转换成TravelTab
    (json['tabs'] as List).map((i) => TravelTab.fromJson(i));
  }

}

/**
 * final写法
 */
class TravelTabModel2 {
  final String url;
  final List tabs;

  TravelTabModel2({this.url, this.tabs});

  factory TravelTabModel2.fromJson(Map json){
    String url = json['url'];
    List tabs = (json['tabs'] as List).map((i) =>
        TravelTab.fromJson(i)).toList();
    return TravelTabModel2(url: url, tabs: tabs);
  }
}

class TravelTab {
  String labelName;
  String groupChannelCode;

  TravelTab({this.labelName, this.groupChannelCode});

  TravelTab.fromJson(Map json){
    labelName = json['labelName'];
    groupChannelCode = json['groupChannelCode'];
  }
}

转换复杂大量数据

http://www.devio.org/io/flutter_app/json/home_page.json

使用在线转换工具json_to_dart生成实体类

class Autogenerated {
  Config config;
  List bannerList;
  List localNavList;
  GridNav gridNav;
  List subNavList;
  SalesBox salesBox;

  Autogenerated(
      {this.config,
      this.bannerList,
      this.localNavList,
      this.gridNav,
      this.subNavList,
      this.salesBox});

  Autogenerated.fromJson(Map json) {
    config =
        json['config'] != null ? new Config.fromJson(json['config']) : null;
    if (json['bannerList'] != null) {
      bannerList = new List();
      json['bannerList'].forEach((v) {
        bannerList.add(new BannerList.fromJson(v));
      });
    }
    if (json['localNavList'] != null) {
      localNavList = new List();
      json['localNavList'].forEach((v) {
        localNavList.add(new LocalNavList.fromJson(v));
      });
    }
    gridNav =
        json['gridNav'] != null ? new GridNav.fromJson(json['gridNav']) : null;
    if (json['subNavList'] != null) {
      subNavList = new List();
      json['subNavList'].forEach((v) {
        subNavList.add(new SubNavList.fromJson(v));
      });
    }
    salesBox = json['salesBox'] != null
        ? new SalesBox.fromJson(json['salesBox'])
        : null;
  }

  Map toJson() {
    final Map data = new Map();
    if (this.config != null) {
      data['config'] = this.config.toJson();
    }
    if (this.bannerList != null) {
      data['bannerList'] = this.bannerList.map((v) => v.toJson()).toList();
    }
    if (this.localNavList != null) {
      data['localNavList'] = this.localNavList.map((v) => v.toJson()).toList();
    }
    if (this.gridNav != null) {
      data['gridNav'] = this.gridNav.toJson();
    }
    if (this.subNavList != null) {
      data['subNavList'] = this.subNavList.map((v) => v.toJson()).toList();
    }
    if (this.salesBox != null) {
      data['salesBox'] = this.salesBox.toJson();
    }
    return data;
  }
}

class Config {
  String searchUrl;

  Config({this.searchUrl});

  Config.fromJson(Map json) {
    searchUrl = json['searchUrl'];
  }

  Map toJson() {
    final Map data = new Map();
    data['searchUrl'] = this.searchUrl;
    return data;
  }
}

class BannerList {
  String icon;
  String url;

  BannerList({this.icon, this.url});

  BannerList.fromJson(Map json) {
    icon = json['icon'];
    url = json['url'];
  }

.....