【Flutter】Flutter 使用 json_serializable 进行 JSON 序列化

一、前言

嗯啊，你好呀！欢迎来到我的博客。

今天我们要聊聊的是如何在 Flutter 中使用 json_serializable 进行 JSON 序列化。

这是小雨青年于 2023 年发布在 CSDN 的博客，如果你不是在 CSDN 看到的，请联系我。

对啦，这个话题可能对于刚接触 Flutter 的你来说有点难度，但是别担心，我会尽可能用简单易懂的语言来解释，让你能够轻松掌握这个技能。

想要精通 Flutter，掌握更多技巧和最佳实践？好消息来了！ Flutter专栏->Flutter Developer 101 入门小册 正在等你！

这里有你需要的所有 Flutter 学习资源，包括代码示例和深度解析。

⏰专栏内容持续更新，价格也会随之上涨。现在加入，享受最优惠的价格！

现在，让我们开始今天的 Flutter 之旅吧！

二、 json_serializable 简介

json_serializable 是一个 Dart 包，它可以自动为你生成 JSON 序列化和反序列化的代码。这个包的主要优点是它可以大大简化 JSON 序列化的过程，让你可以更专注于业务逻辑的开发。

那么，为什么我们需要进行 JSON 序列化呢？在开发过程中，我们经常需要从服务器获取数据，或者将数据发送到服务器。这些数据通常是以 JSON 格式进行传输的。因此，我们需要一种方法来将 Dart 对象转换为 JSON 格式，以便可以将它们发送到服务器，同时也需要一种方法来将 JSON 数据转换为 Dart 对象，以便我们可以在应用中使用这些数据。这就是我们需要 json_serializable 的原因。

好了，现在你应该对 Flutter 和 json_serializable 有了一定的了解。接下来，我们将进入实战部分，让我们看看如何在 Flutter 中安装和配置 json_serializable，以及如何使用它进行 JSON 序列化。

三、如何在 Flutter 中安装和配置 json_serializable

要在 Flutter 中使用 json_serializable，我们首先需要在项目中安装它。这个过程非常简单，只需要在你的 pubspec.yaml 文件中添加以下代码：

dependencies:
  flutter:
    sdk: flutter
  json_annotation: ^4.0.0

dev_dependencies:
  build_runner: ^2.0.0
  json_serializable: ^6.0.0

然后，你可以在终端中运行 flutter pub get 命令来获取这些依赖包。

安装完 json_serializable 后，我们需要进行一些简单的配置。首先，我们需要在我们想要进行 JSON 序列化的 Dart 类上添加 @JsonSerializable() 注解。然后，我们需要在这个类中添加两个方法：fromJson 和 toJson。fromJson 方法用于将 JSON 数据转换为 Dart 对象，而 toJson 方法则用于将 Dart 对象转换为 JSON 数据。

四、json_serializable 的基本使用

在这一部分，我们将创建一个简单的模型类，并使用 json_serializable 进行 JSON 序列化。

首先，我们创建一个名为 Person 的模型类，这个类有两个属性：firstName 和 lastName。然后，我们在这个类上添加 @JsonSerializable() 注解，并添加 fromJson 和 toJson 方法。

import 'package:json_annotation/json_annotation.dart';

part 'person.g.dart';

@JsonSerializable()
class Person {
  final String firstName;
  final String lastName;

  Person({required this.firstName, required this.lastName});

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

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

在这个代码中，_$PersonFromJson 和 _$PersonToJson 是由 json_serializable 自动生成的方法，我们只需要调用它们就可以进行 JSON 序列化和反序列化。

然后，我们可以创建一个 Person 对象，并使用 toJson 方法将它转换为 JSON 数据：

void main() {
  var person = Person(firstName: 'John', lastName: 'Doe');
  print(person.toJson());
}

这段代码会输出：{firstName: John, lastName: Doe}。

同样，我们也可以使用 fromJson 方法将 JSON 数据转换为 Person 对象：

void main() {
  var jsonData = {'firstName': 'John', 'lastName': 'Doe'};
  var person = Person.fromJson(jsonData);
  print(person.firstName);  // 输出：John
  print(person.lastName);   // 输出：Doe
}

这就是 json_serializable 的基本使用方法。通过使用 json_serializable，我们可以非常方便地进行 JSON 序列化和反序列化，大大提高了我们的开发效率。

五、一个实际的 Flutter 应用示例

现在，我们来看一个实际的 Flutter 应用示例。在这个示例中，我们将创建一个用户列表，并使用 json_serializable 进行 JSON 序列化和反序列化。

首先，我们创建一个 User 类，这个类有三个属性：id，name 和 email。然后，我们在这个类上添加 @JsonSerializable() 注解，并添加 fromJson 和 toJson 方法。

import 'package:json_annotation/json_annotation.dart';

part 'user.g.dart';

@JsonSerializable()
class User {
  final int id;
  final String name;
  final String email;

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

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

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

然后，我们创建一个 UserList 类，这个类有一个 users 属性，它是一个 User 对象的列表。我们同样在这个类上添加 @JsonSerializable() 注解，并添加 fromJson 和 toJson 方法。

import 'package:json_annotation/json_annotation.dart';

part 'user_list.g.dart';

@JsonSerializable()
class UserList {
  final List<User> users;

  UserList({required this.users});

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

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

现在，我们可以创建一个 UserList 对象，并使用 toJson 方法将它转换为 JSON 数据：

void main() {
  var userList = UserList(users: [
    User(id: 1, name: 'John Doe', email: '[email protected]'),
    User(id: 2, name: 'Jane Doe', email: '[email protected]'),
  ]);
  print(userList.toJson());
}

这段代码会输出：{users: [{id: 1, name: John Doe, email: [email protected]}, {id: 2, name: Jane Doe, email: [email protected]}]}。

同样，我们也可以使用 fromJson 方法将 JSON 数据转换为 UserList 对象：

void main() {
  var jsonData = {
    'users': [
      {'id': 1, 'name': 'John Doe', 'email': '[email protected]'},
      {'id': 2, 'name': 'Jane Doe', 'email': '[email protected]'},
    ]
  };
  var userList = UserList.fromJson(jsonData);
  for (var user in userList.users) {
    print('${user.id}: ${user.name} (${user.email})');
  }
}

这段代码会输出：

1: John Doe ([email protected])
2: Jane Doe ([email protected])

六、版本信息

在我们的示例中，我们使用的 Flutter 版本是 3.10.0，Dart SDK的版本是 3.0.0。

这些版本信息是在编写这篇文章时的最新版本，如果你使用的版本不同，可能需要进行一些调整。

七、总结

我们已经学习了如何在 Flutter 中使用 json_serializable 进行 JSON 序列化。

我们首先了解了 Flutter 和 json_serializable 的基本概念，然后我们学习了如何在 Flutter 中安装和配置 json_serializable，以及如何使用 json_serializable 进行基本的 JSON 序列化。最后，我们通过一个实际的 Flutter 应用示例，看到了 json_serializable 在实际应用中的强大功能。

通过学习这篇文章，我希望你能够理解 JSON 序列化的重要性，以及 json_serializable 如何帮助我们简化 JSON 序列化的过程。记住，学习新的技能总是需要时间和实践的，所以不要急于求成，慢慢来，你一定可以掌握这个技能的。

这是小雨青年于 2023 年发布在 CSDN 的博客，如果你不是在 CSDN 看到的，请联系我。如果你有任何问题或者建议，欢迎在评论区留言，我会尽我所能来帮助你。那么，我们下次再见，祝你学习愉快，再见！

对 Flutter 好奇？想深入探索？ Flutter专栏->Flutter Developer 101 入门小册 是你的最佳伙伴！

你将在这里找到全面的 Flutter 学习资源，包括代码示例和深度解析。

想知道如何用 Flutter 构建应用？答案就在我们的专栏！

⏰别等了，专栏内容持续更新，价格也会随之上涨。现在加入，享受最优惠的价格！

一起在 Flutter 的世界中探索吧！想了解更多？点击这里：Flutter Developer 101 入门小册 专栏指引