首页 前端知识 Flutter-使用Json序列化工具json_serializable数据解析生成xx.g.dart文件步骤

Flutter-使用Json序列化工具json_serializable数据解析生成xx.g.dart文件步骤

2024-08-22 23:08:55 前端知识 前端哥 521 130 我要收藏

如何根据json生成dart和g.dart 文件?

flutter中文网地址

11.7 JSON转Dart Model类 | 《Flutter实战·第二版》

json2dart_for_json_serializable

这个网站  json2dart_for_json_serializable 可以自动将json文件转成json_serializable所需要的格式,新建并复制成***.dart文件,

通过在terminal内输入下面代码,自动生成.g.dart文件

flutter packages pub run build_runner build

如果有报错可以尝试一下下面这条

flutter packages pub run build_runner build --delete-conflicting-outputs

第一步:pubspec.yaml文件导入依赖库,注意对齐

dependencies:
  flutter:
    sdk: flutter
  json_annotation: ^4.8.1
 
dev_dependencies:
  flutter_test:
    sdk: flutter
  json_serializable: ^6.7.1
  build_runner: ^2.4.8

第二步:新建model.dart文件,导入头文件,文件内容,复制如下,格式最好整齐 调整下class 名称等报错信息

import 'package:json_annotation/json_annotation.dart';

part 'ad_list_bean.g.dart';


@JsonSerializable()
class AdListBean  {

  @JsonKey(name: 'list')
  List<AdListInfoBean> list;

  AdListBean(this.list,);

  factory AdListBean.fromJson(Map<String, dynamic> srcJson) => _$AdListBeanFromJson(srcJson);

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

}


@JsonSerializable()
class AdListInfoBean  {

  @JsonKey(name: 'title')
  late String title;

  @JsonKey(name: 'category_id')
  late String categoryId;

  @JsonKey(name: 'url')
  late String url;

  @JsonKey(name: 'imageUrl')
  late String imageUrl;

  @JsonKey(name: 'jumpType')
  late String jumpType;

  AdListInfoBean(this.title,this.categoryId,this.url,this.imageUrl,this.jumpType,);

  factory AdListInfoBean.fromJson(Map<String, dynamic> srcJson) => _$AdListInfoBeanFromJson(srcJson);

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

}

  

第三步:cd到工程的根目录,再执行下面命令

 //第一种使用 build_runner 手动生成 .g.dart 文件

flutter packages pub run build_runner build

生成成功

//第二种 监控自动更新生成文件,如果有改动时自动生成/更新 .g.dart 文件

flutter packages pub run build_runner wacth 

如果出现报错或者仍然没生成.g.dart文件

使用下面的方法

flutter packages pub run build_runner build --delete-conflicting-outputs  //删除并重新创建.g.dart文件
转载请注明出处或者链接地址:https://www.qianduange.cn//article/16583.html
标签
flutter
评论
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!