系列文章目录

Flutter开发-01-JSON和序列化在Flutter中的最佳实践

前言

尽管在前两年作业就不是全部时刻在业务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) 生成代码，运用插件更为简洁。嵌套类下一节介绍。多多支持点个赞，有错误的地方，多多纠正，谢谢。