当前位置：首页 > news >正文

Flutter_学习记录_json自动解析转模型

news 来源：原创 2025/6/17 21:34:38

对于App开发，从网络请求回来的json数据要转成模型，如果手动转的话，比较麻烦，可以用json_annotation库来实现。具体步骤如下~

1. 引入三方库

json自动转模型，需要用到三个库：

json_annotation
json_serializable
build_runner

引入库的步骤如下：

在这里插入图片描述

2. 创建模型

先创建一个文件，例如文件名为image.dart, 如下图：
在这里插入图片描述
然后在image.dart文件中，新建一个模型，例如ImageEntiry，添加对应的属性，如下图：

3. 引入`@JsonSerializable()` 的注解

在类型前面，添加@JsonSerializable() 的注解，如下图：
在这里插入图片描述

4. 提前导入自动解析会生成的文件 `part 'xxx.g.dart'`

因为 自动生成字典转模型或者模型转字典的代码，是三方库生成的，会自动放到一个新的文件里面，文件的格式就是xx.g.dart, 其中xx 表示模型对应的文件的名字。例如模型ImageEntiry在image.dart, 那么自动生成的文件就是image.g.dart, 所以，需要先提前导入这个文件，不然会自动生成失败。如下图：
在这里插入图片描述

5. 在命令行中，执行自动生成json转模型的命令`flutter packages pub run build_runner build`

在命令行中，执行 flutter packages pub run build_runner build，等一会儿，如果执行成功的话，会在目录下，看到自动生成的xx.g.dart的文件，如下图：
在这里插入图片描述

6. 在模型类中，添加`fromJosn` 和 `toJson`的方法

自动生成的代码中，
方法名带fromJson的表示自动生成的 json转模型的方法；
方法名带toJson的表示自动生成的模型转json的方法。

在模型类中，添加fromJosn 和 toJson的方法，使用如下：

// 字典转模型
  factory ImageEntiry.fromJson(Map<String, dynamic> json) => _$ImageEntiryFromJson(json);
  // 模型转字典
  Map<String, dynamic> toJson() => _$ImageEntiryToJson(this);

7. 完整的代码实例


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

@JsonSerializable()
class ImageEntiry {
   String url;
   int width;
   int height;
   int size;

   ImageEntiry({
    this.url = "",
    this.width = 0,
    this.height = 0,
    this.size = 0
  });

  // 字典转模型
  factory ImageEntiry.fromJson(Map<String, dynamic> json) => _$ImageEntiryFromJson(json);
  // 模型转字典
  Map<String, dynamic> toJson() => _$ImageEntiryToJson(this);

  double get ratio {
    if ( width != 0 && height != 0) {
      return width / height;
    } else {
      return 16/9;
    }
  }
}