阅读 15 SEO

Flutter开发(11)- JSON转Model

Flutter如何JSON转Model

    在开发中,服务端通常给我们返回的是JSON数据,我们需要将JSON数据转成我们的模型对象来使用。

    在Flutter中,有几种JSON转模型的方式,我们还是以豆瓣为例,来进行一个演练;

一. 豆瓣数据

这里我们使用豆瓣的请求地址:

    https://douban.uieee.com/v2/movie/top250?start=0&count=20

在浏览器中请求,获取到的数据如下:

注意:这里我使用了一个格式化插件:FeHelper,所以结构看起来很清晰

这个数据还是比较复杂的:

    如果我们希望在Flutter代码中使用,直接将JSON转成Map来使用也可以,但是非常麻烦,而且类型会不容易确定,并且不安全;

    所以对于面向对象开发的语言,我们通常都会将它转成模型对象,之后使用一个个模型对象;

我们一起来探究一下,目前Flutter中比较常见的将JSON转成模型的方式。

二. 手动转化

JSON转模型,必然可以通过手动来进行转化:

优点:完全是自己可控的,并且需要哪些字段就转化哪些字段,对于不需要的,忽略即可;并且继承关系也会一目了然

缺点:麻烦,并且容易出错;

下面是我之前针对上面的数据,写的JSON转Model的模型类:

class Person {

  String name;

  String avatarURL;

  Person.fromMap(Map<String, dynamic> json) {

    this.name = json["name"];

    this.avatarURL = json["avatars"]["medium"];

  }

}

class Actor extends Person {

  Actor.fromMap(Map<String, dynamic> json): super.fromMap(json);

}

class Director extends Person {

  Director.fromMap(Map<String, dynamic> json): super.fromMap(json);

}

int counter = 1;

class MovieItem {

  int rank;

  String imageURL;

  String title;

  String playDate;

  double rating;

  List<String> genres;

  List<Actor> casts;

  Director director;

  String originalTitle;

  MovieItem.fromMap(Map<String, dynamic> json) {

    this.rank = counter++;

    this.imageURL = json["images"]["medium"];

    this.title = json["title"];

    this.playDate = json["year"];

    this.rating = json["rating"]["average"];

    this.genres = json["genres"].cast<String>();

    this.casts = (json["casts"] asList<dynamic>).map((item) {

      return Actor.fromMap(item);

    }).toList();

    this.director = Director.fromMap(json["directors"][0]);

    this.originalTitle = json["original_title"];

  }

}

三. json_serializable

json_serializable是dart官方推荐和提供的JSON转Model的方式:

    一个自动化源代码生成器来为你生成 JSON 序列化数据模板;

    由于序列化数据代码不再需要手动编写或者维护,你可以将序列化 JSON 数据在运行时的异常风险降到最低;

第一步:添加相关的依赖

依赖分为项目依赖(dependencies),开发依赖(dev_dependencies):

    注意:需要执行flutter pub get确保我们的项目中有这些依赖

dependencies:

  json_annotation:^3.0.1

dev_dependencies:

  json_serializable:^3.2.5

  build_runner:^1.8.0

第二步:以json_serializable 的方式创建模型类

    这里不以豆瓣数据为例,以一个简单的Json数据作为例子

final jsonInfo = {

    "nickname": "coderwhy",

    "level": 18,

    "courses": ["语文", "数学", "英语"],

    "register_date": "2222-2-22",

    "computer": {

      "brand": "MackBook",

      "price": 1000

    }

  };

创建对应的模型(以json_serializable 的方式,创建完成后代码是报错的)

1.part 'user.g.dart'

    这个是之后json_serializable会自动帮助我们生成的文件

2.JsonSerializable()

    注解:告诉json_serializable哪一个类需要进行转换

3.JsonKey

    当映射关系不一样时,可以指定映射关系

4.另外,这里必须有我们的构造方法

5.需要有对应的工厂构造器

    _UserFromJson(json)和_UserToJson(this)调用的该方法目前会报错,需要json_serializable来生成

6.toString方法不是必须的,是待会儿进行测试的

User类的代码:

import'package:json_annotation/json_annotation.dart';

import'model/computer.dart';

part'user.g.dart';

@JsonSerializable()

class User {

  String name;

  String email;

  @JsonKey(name: "register_date")

  String registerDate;

  List<String> courses;

  Computer computer;

  User(this.name, this.email, this.registerDate, this.courses, this.computer);

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);

  Map<String, dynamic> toJson() => _$UserToJson(this);

  @override

  String toString() {

    return'User{name: $name, email: $email, registerDate: $registerDate, courses: $courses, computer: $computer}';

  }

}

Computer类的代码:

import'package:json_annotation/json_annotation.dart';

part'computer.g.dart';

@JsonSerializable()

class Computer {

  String brand;

  double price;

  Computer(this.brand, this.price);

  factory Computer.fromJson(Map<String, dynamic> json) => _$ComputerFromJson(json);

  Map<String, dynamic> toJson() => _$ComputerToJson(this);

  @override

  String toString() {

    return'Computer{brand: $brand, price: $price}';

  }

}

第三步:生成JSON序列化代码

在项目终端运行下面的指令:

    该指令是生成一次JSON序列化的代码

flutter pub run build_runner build

或运行下面的指令:

    会监听文件的改变,重新生成JSON序列化的代码

flutter pub run build_runner watch

第四步:测试代码

final jsonInfo = {

  "nickname": "coderwhy",

  "level": 18,

  "courses": ["语文", "数学", "英语"],

  "register_date": "2222-2-22",

  "computer": {

    "brand": "MackBook",

    "price": 1000

  }

};

final user = User.fromJson(jsonInfo);

print(user);

更多资料,请查看下面的资源:

    dart:convert 和 JsonCodec 文档

    Pub 中的 json_serializable package

    GitHub 中的 json_serializable 例子

四. 网页转换

目前有一些网页,可以直接将JSON转成Model

    网页推荐:https://javiercbk.github.io/json_to_dart/

我们这里以网页版本为例,非常简单:

    注意:可能因为豆瓣的数据过于复杂,所以在生成的时候发现少了一个Directors类

    这里我重新复制对应的JSON,再次生成了一下

class MovieItem {

  Rating rating;

  List<String> genres;

  String title;

  List<Casts> casts;

  List<String> durations;

  int collectCount;

  String mainlandPubdate;

  bool hasVideo;

  String originalTitle;

  String subtype;

  List<Directors> directors;

  List<String> pubdates;

  String year;

  Avatars images;

  String alt;

  String id;

  MovieItem(

      {this.rating,

        this.genres,

        this.title,

        this.casts,

        this.durations,

        this.collectCount,

        this.mainlandPubdate,

        this.hasVideo,

        this.originalTitle,

        this.subtype,

        this.directors,

        this.pubdates,

        this.year,

        this.images,

        this.alt,

        this.id});

  MovieItem.fromJson(Map<String, dynamic> json) {

    rating =

    json['rating'] != null ? new Rating.fromJson(json['rating']) : null;

    genres = json['genres'].cast<String>();

    title = json['title'];

    if (json['casts'] != null) {

      casts = newList<Casts>();

      json['casts'].forEach((v) {

        casts.add(new Casts.fromJson(v));

      });

    }

    durations = json['durations'].cast<String>();

    collectCount = json['collect_count'];

    mainlandPubdate = json['mainland_pubdate'];

    hasVideo = json['has_video'];

    originalTitle = json['original_title'];

    subtype = json['subtype'];

    if (json['directors'] != null) {

      directors = newList<Directors>();

      json['directors'].forEach((v) {

        directors.add(new Directors.fromJson(v));

      });

    }

    pubdates = json['pubdates'].cast<String>();

    year = json['year'];

    images =

    json['images'] != null ? new Avatars.fromJson(json['images']) : null;

    alt = json['alt'];

    id = json['id'];

  }

  Map<String, dynamic> toJson() {

    finalMap<String, dynamic> data = newMap<String, dynamic>();

    if (this.rating != null) {

      data['rating'] = this.rating.toJson();

    }

    data['genres'] = this.genres;

    data['title'] = this.title;

    if (this.casts != null) {

      data['casts'] = this.casts.map((v) => v.toJson()).toList();

    }

    data['durations'] = this.durations;

    data['collect_count'] = this.collectCount;

    data['mainland_pubdate'] = this.mainlandPubdate;

    data['has_video'] = this.hasVideo;

    data['original_title'] = this.originalTitle;

    data['subtype'] = this.subtype;

    if (this.directors != null) {

      data['directors'] = this.directors.map((v) => v.toJson()).toList();

    }

    data['pubdates'] = this.pubdates;

    data['year'] = this.year;

    if (this.images != null) {

      data['images'] = this.images.toJson();

    }

    data['alt'] = this.alt;

    data['id'] = this.id;

    return data;

  }

}

class Rating {

  int max;

  double average;

  Details details;

  String stars;

  int min;

  Rating({this.max, this.average, this.details, this.stars, this.min});

  Rating.fromJson(Map<String, dynamic> json) {

    max = json['max'];

    average = json['average'];

    details =

    json['details'] != null ? new Details.fromJson(json['details']) : null;

    stars = json['stars'];

    min = json['min'];

  }

  Map<String, dynamic> toJson() {

    finalMap<String, dynamic> data = newMap<String, dynamic>();

    data['max'] = this.max;

    data['average'] = this.average;

    if (this.details != null) {

      data['details'] = this.details.toJson();

    }

    data['stars'] = this.stars;

    data['min'] = this.min;

    return data;

  }

}

class Details {

  int i1;

  int i2;

  int i3;

  int i4;

  int i5;

  Details({this.i1, this.i2, this.i3, this.i4, this.i5});

  Details.fromJson(Map<String, dynamic> json) {

    i1 = json['1'];

    i2 = json['2'];

    i3 = json['3'];

    i4 = json['4'];

    i5 = json['5'];

  }

  Map<String, dynamic> toJson() {

    finalMap<String, dynamic> data = newMap<String, dynamic>();

    data['1'] = this.i1;

    data['2'] = this.i2;

    data['3'] = this.i3;

    data['4'] = this.i4;

    data['5'] = this.i5;

    return data;

  }

}

class Casts {

  Avatars avatars;

  String nameEn;

  String name;

  String alt;

  String id;

  Casts({this.avatars, this.nameEn, this.name, this.alt, this.id});

  Casts.fromJson(Map<String, dynamic> json) {

    avatars =

    json['avatars'] != null ? new Avatars.fromJson(json['avatars']) : null;

    nameEn = json['name_en'];

    name = json['name'];

    alt = json['alt'];

    id = json['id'];

  }

  Map<String, dynamic> toJson() {

    finalMap<String, dynamic> data = newMap<String, dynamic>();

    if (this.avatars != null) {

      data['avatars'] = this.avatars.toJson();

    }

    data['name_en'] = this.nameEn;

    data['name'] = this.name;

    data['alt'] = this.alt;

    data['id'] = this.id;

    return data;

  }

}

class Directors {

  Avatars avatars;

  String nameEn;

  String name;

  String alt;

  String id;

  Directors({this.avatars, this.nameEn, this.name, this.alt, this.id});

  Directors.fromJson(Map<String, dynamic> json) {

    avatars =

    json['avatars'] != null ? new Avatars.fromJson(json['avatars']) : null;

    nameEn = json['name_en'];

    name = json['name'];

    alt = json['alt'];

    id = json['id'];

  }

  Map<String, dynamic> toJson() {

    finalMap<String, dynamic> data = newMap<String, dynamic>();

    if (this.avatars != null) {

      data['avatars'] = this.avatars.toJson();

    }

    data['name_en'] = this.nameEn;

    data['name'] = this.name;

    data['alt'] = this.alt;

    data['id'] = this.id;

    return data;

  }

}

class Avatars {

  String small;

  String large;

  String medium;

  Avatars({this.small, this.large, this.medium});

  Avatars.fromJson(Map<String, dynamic> json) {

    small = json['small'];

    large = json['large'];

    medium = json['medium'];

  }

  Map<String, dynamic> toJson() {

    finalMap<String, dynamic> data = newMap<String, dynamic>();

    data['small'] = this.small;

    data['large'] = this.large;

    data['medium'] = this.medium;

    return data;

  }

}

五. 编辑器插件

目前也有一些AndroidStudio或者VSCode的插件,来帮助我们直接将JSON生成对应的Model

    VSCode目前没有找到比较好用的插件推荐

    Android Studio推荐FlutterJsonBeanFactory

第一步:安装插件

第二步:创建模型

    右键新建文件:

    给类起一个名字,并且将JSON复制过去

第三步:使用生成的模型

创建完成后会生成对应的模型,并且还会生成一个文件夹,里面有生成模型过程的代码

    这里不再给出,代码都是相似的

作者:5e4c664cb3ba

原文链接:https://www.jianshu.com/p/ee021486431c

文章分类
后端
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 gxwowoo@163.com 举报,一经查实,本站将立刻删除。
相关推荐