系列文章目录

---

前言

本文记录下在Flutter中使用JSON和序列化相关的方法和要点，方便记忆。主要有两种方式，其中json_serializable为官方推荐使用的代码工具生成方式。另一种是直接使用插件生成序列化实体类。

---

一、使用代码生成库序列化 JSON 数据 json_serializable

1、在项目中pubspec.yaml中设置json_serializable：

dependencies:
  json_annotation: <latest_version>

dev_dependencies:
  build_runner: <latest_version>
  json_serializable: <latest_version>

2、使用 json_serializable 的方式创建模型类

JSON数据

{
    "name":"Jerry",
    "email":"Jerry@example.com"
}

建立一个名为uer.dart的类：

import 'package:json_annotation/json_annotation.dart';

part 'user.g.dart';

@JsonSerializable()
class User2 {
  String name;
  String email;

  User2(this.name, this.email);
}

代码生成方式有两种：

• 一次性代码生成：在项目根目录运行命令：flutter pub run build_runner build --delete-conflicting-outputs ; 需要在每次修改模型类后手动构建；
• 持续生成代码：在项目根目录运行命令：flutter pub run build_runner watch 来启动监听；使用监听器监听项目中的文件的变化，并在需要时自动构建必要的文件；启动监听并让它留在后台运行是安全的。

运行命令生成工具，会发现生成了名为user.g.dart的文件:

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'user.dart';

// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************

User _$UserFromJson(Map<String, dynamic> json) => User(
      json['name'] as String,
      json['email'] as String,
    );

Map<String, dynamic> _$UserToJson(User instance) => <String, dynamic>{
      'name': instance.name,
      'email': instance.email,
    };

然后再user.dart文件中引入写入formJson 和 toJson 两个方法：

import 'package:json_annotation/json_annotation.dart';

part 'user.g.dart';

@JsonSerializable()
class User {
  String name;
  String email;

  User(this.name, this.email);

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

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

3、使用 json_serializable 模型：

const jsonString = '{"name": "Jerry","email": "Jerry@example.com"}';
Map<String, dynamic> userMap = jsonDecode(jsonString);

if (kDebugMode) {
    print('User   $userMap');
}

var user = User.fromJson(userMap);

if (kDebugMode) {
	print('User   ${user.toString()}');
	print('User   ${user.toJson()}');
	print('User   ${jsonEncode(user)}');
	print('User   ${user.name}');
	print('User   ${user.email}');
}

查看打印日志：

User    {name: Jerry, email: Jerry@example.com}
User   Instance of 'User'
User   {name: Jerry, email: Jerry@example.com}
User   {"name":"Jerry","email":"Jerry@example.com"}
User   Jerry
User   Jerry@example.com

二、使用插件序列化JSON数据

1.下载插件 or 网页生成

网页生成链接：quicktype

2、使用：

使用插件生成：

网页生成：

生成代码一致，直接copy过来即可。

import 'dart:convert';

User userFromJson(String str) => User.fromJson(json.decode(str));

String userToJson(User data) => json.encode(data.toJson());

class User {
    User({
        required this.name,
        required this.email,
    });

    String name;
    String email;

    factory User.fromJson(Map<String, dynamic> json) => User(
        name: json["name"],
        email: json["email"],
    );

    Map<String, dynamic> toJson() => {
        "name": name,
        "email": email,
    };
}

3.解析数据

代码如下：

const jsonString = '{"name": "Jerry","email": "Jerry@example.com"}';
Map<String, dynamic> userMap = jsonDecode(jsonString);

if (kDebugMode) {
    print('User   $userMap');
}

var user = User.fromJson(userMap);

if (kDebugMode) {
	print('User   ${user.toString()}');
	print('User   ${user.toJson()}');
	print('User   ${jsonEncode(user)}');
	print('User   ${user.name}');
	print('User   ${user.email}');
}

查看打印日志：

User    {name: Jerry, email: Jerry@example.com}
User   Instance of 'User'
User   {name: Jerry, email: Jerry@example.com}
User   {"name":"Jerry","email":"Jerry@example.com"}
User   Jerry
User   Jerry@example.com

总结

本文简单记录了Flutter开发中的JSON数据的序列化操作方式，主要有两种方式，其中json_serializable为官方推荐使用的代码工具生成方式。另一种是直接使用插件生成序列化实体类，两者比较后，个人觉得使用插件相对比较方便。尤其是对于复杂的嵌套的JSON数据生成嵌套类 (Nested Classes) 生成代码，使用插件更为简便。嵌套类下一节介绍。多多支持点个赞，有错误的地方，多多指正，谢谢。