Flutter JSON数据模型生成插件json_model的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

Flutter JSON数据模型生成插件 json_model 的使用

json_model 是一个用于将JSON文件转换为Dart数据模型类的插件。它简化了从JSON到Dart模型的转换过程,并且支持多种配置选项来满足不同的需求。

安装

在你的 pubspec.yaml 文件中添加以下依赖:

dev_dependencies: 
  json_model: ^1.0.0
  json_serializable: ^5.0.0

然后运行 flutter pub getpub get 来安装这些依赖。

使用步骤

  1. 在项目根目录下创建一个名为 jsons 的目录。
  2. 将你的JSON文件放入 jsons 目录中。
  3. 运行命令 flutter packages pub run json_model(对于Flutter项目)或 pub run json_model(对于Dart VM项目)。生成的Dart模型类默认会放在 lib/models 目录下。

核心思想

json_model 的主要思想是只维护JSON文件,而不需要关心生成的Dart文件。只要JSON文件存在,就可以随时通过一条命令重新生成Dart类。这对于多人协作项目尤其有用,可以将其集成到构建流程中,避免每个人都需要手动转换工具。

示例

JSON文件示例 (jsons/user.json)

{
  "name": "wendux",
  "father": "$user", // 引用其他model类
  "friends": "$[]user", // 引用数组
  "keywords": "$[]String", // 字符串数组
  "age?": 20 // 可能为null的字段
}

生成的Dart模型类 (lib/models/user.dart)

import 'package:json_annotation/json_annotation.dart';

part 'user.g.dart';

@JsonSerializable()
class User {
  User();

  late String name;
  late User father;
  late List<User> friends;
  late List<String> keywords;
  num? age;

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

Json标注

你也可以使用 json_annotation 包中的所有注解。例如,如果你有一个字段名包含特殊字符如 +1,你可以使用 @JsonKey 来映射变量名:

{
  "@JsonKey(name: '+1') int?": "loved", // 将“+1”映射为“loved”
  "name": "wendux",
  "age?": 20
}

生成的Dart文件如下:

import 'package:json_annotation/json_annotation.dart';
part 'user.g.dart';

@JsonSerializable()
class User {
  User();
  @JsonKey(name: '+1') int? loved;
  late String name;
  num? age;

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

测试代码:

import 'models/index.dart';

void main() {
  var u = User.fromJson({"name": "Jack", "age": 16, "+1": 20});
  print(u.loved); // 输出:20
}

$meta 配置

你可以在JSON文件中使用 $meta 来定制生成Dart文件的规则:

{
  "@meta": {
    "import": [
      "test_dir/profile.dart"
    ],
    "comments": {
      "name": "名字"
    },
    "nullable": true,
    "ignore": false
  },
  "@JsonKey(ignore: true) Profile?": "profile",
  "@JsonKey(name: '+1') int?": "loved",
  "name": "wendux",
  "father": "$user",
  "friends": "$[]user",
  "keywords": "$[]String",
  "age?": 20
}

生成的Dart文件如下:

import 'package:json_annotation/json_annotation.dart';
import 'test_dir/profile.dart';
part 'user.g.dart';

@JsonSerializable()
class User {
  User();

  @JsonKey(ignore: true) Profile? profile;
  @JsonKey(name: '+1') int? loved;
  // 名字
  String? name;
  User? father;
  List<User>? friends;
  List<String>? keywords;
  num? age;

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

全局命令参数

  • 自定义源JSON文件目录:

    pub run json_model src=json_files 
    
  • 自定义输出目录:

    pub run json_model src=json_files dist=data # 输出目录为 lib/data
    
  • 设置生成字段为可空类型:

    pub run json_model --nullable
    

注意:如果JSON文件中的 $meta 配置了 nullable,则会覆盖全局命令配置。

代码调用

如果你想在工具开发中使用 json_model,可以通过代码调用来实现:

import 'package:json_model/json_model.dart';

void main() {
  run(['src=jsons']);  // run方法为json_model暴露的方法;
}

这个简单的教程展示了如何使用 json_model 插件快速生成Dart数据模型类,并提供了一些高级功能和配置选项。希望这对你有所帮助!


更多关于Flutter JSON数据模型生成插件json_model的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter JSON数据模型生成插件json_model的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,关于Flutter中JSON数据模型生成插件json_model的使用,这里是一个详细的代码案例来展示如何使用该插件。

步骤1:安装json_model插件

首先,你需要在你的Flutter项目中添加json_model插件。打开你的pubspec.yaml文件,并在dependencies部分添加以下依赖:

dependencies:
  flutter:
    sdk: flutter
  json_model: ^latest_version  # 请替换为最新的版本号

然后,在终端中运行以下命令来获取依赖:

flutter pub get

步骤2:创建JSON数据

假设你有以下的JSON数据:

{
  "name": "John Doe",
  "age": 30,
  "email": "john.doe@example.com",
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
    "zipCode": "12345"
  }
}

步骤3:使用json_model生成数据模型

json_model插件通常通过命令行工具来生成数据模型。假设你已经全局安装了json_model,你可以在项目根目录下运行以下命令来生成模型:

json_model --input=data.json --output=lib/models

这里的data.json是你的JSON数据文件,lib/models是你希望生成数据模型的目录。

步骤4:查看生成的数据模型

运行上述命令后,json_model会在lib/models目录下生成对应的Dart文件。假设生成的文件名为user_model.dart,其内容可能如下所示:

import 'package:json_annotation/json_annotation.dart';

part 'user_model.g.dart';

@JsonSerializable()
class UserModel {
  String name;
  int age;
  String email;
  Address address;

  UserModel({
    required this.name,
    required this.age,
    required this.email,
    required this.address,
  });

  factory UserModel.fromJson(Map<String, dynamic> json) => _$UserModelFromJson(json);
  Map<String, dynamic> toJson() => _$UserModelToJson(this);
}

@JsonSerializable()
class Address {
  String street;
  String city;
  String zipCode;

  Address({
    required this.street,
    required this.city,
    required this.zipCode,
  });

  factory Address.fromJson(Map<String, dynamic> json) => _$AddressFromJson(json);
  Map<String, dynamic> toJson() => _$AddressToJson(this);
}

注意,json_model会自动生成fromJsontoJson方法,这些方法是基于json_annotation包实现的。

步骤5:在Flutter应用中使用数据模型

现在,你可以在Flutter应用中使用这个数据模型。例如,从网络获取JSON数据并解析为UserModel对象:

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'models/user_model.dart'; // 导入生成的数据模型

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  UserModel? user;

  @override
  void initState() {
    super.initState();
    fetchUser();
  }

  Future<void> fetchUser() async {
    final response = await http.get(Uri.parse('https://api.example.com/user'));

    if (response.statusCode == 200) {
      // 如果服务器返回的数据是JSON格式,则解码
      Map<String, dynamic> data = jsonDecode(response.body);
      UserModel userModel = UserModel.fromJson(data);

      // 更新状态
      setState(() {
        user = userModel;
      });
    } else {
      throw Exception('Failed to load user');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('User Info'),
        ),
        body: user == null
            ? Center(child: CircularProgressIndicator())
            : Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('Name: ${user!.name}'),
                    Text('Age: ${user!.age}'),
                    Text('Email: ${user!.email}'),
                    Text('Street: ${user!.address!.street}'),
                    Text('City: ${user!.address!.city}'),
                    Text('Zip Code: ${user!.address!.zipCode}'),
                  ],
                ),
              ),
      ),
    );
  }
}

在这个例子中,我们首先从网络获取JSON数据,然后使用UserModel.fromJson方法将JSON数据解析为UserModel对象,最后在UI中显示这些数据。

这就是使用json_model插件在Flutter中生成和使用JSON数据模型的完整流程。希望这对你有所帮助!

回到顶部