首页 前端知识 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

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