Flutter开发-01-JSON和序列化数据

系列文章目录

---

前言

虽然在前两年工作就不是全部时间在业务Coding上，而是重点转向架构了，但是自己在技术上还是要有所坚持，后续会继续抽时间把之前几年学习掌握的一些知识以及工作中积累的开发经验进行系统性的梳理，并且从本地的笔记中摘取部分文章整理在掘金博客上，大家互相学习。有不准确的地方，可以私信或者在评论区帮我指出来，我们共同探讨，学习，进步。Fighting~

本文记录下在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) 生成代码，使用插件更为简便。嵌套类下一节介绍。多多支持点个赞，有错误的地方，多多指正，谢谢。