2.Flutter开发玩安卓app-项目基础搭建
2019-10-16 本文已影响0人
eliteTyc
项目目录创建
image.png
目录讲解
整个目录中比较重要的是:lib/models和根目录下的jsons目录，这两个包的位置必须是这样，因为后面我们将使用json_model这个依赖来将json转换成Dart model,因为json_model还依赖了json_serializable这个依赖，所以我们的yaml文件需要添加为如下
dependencies:
# json生成model需要的依赖
json_annotation: ^2.0.0
dev_dependencies:
# json生成model需要的依赖
build_runner: ^1.0.0
json_serializable: ^2.0.0
json_model: ^0.0.2
附上json_model中文文档地址:json_model
使用
- 在工程根目录下创建一个名为 "jsons" 的目录;
- 创建或拷贝Json文件到"jsons" 目录中 ;
- 运行
pub run json_model(Dart VM工程)orflutter packages pub run json_model(Flutter中) 命令生成Dart model类，生成的文件默认在"lib/models"目录下
例子
Json文件: jsons/user.json
{
"name":"wendux",
"father":"$user", //可以通过"$"符号引用其它model类
"friends":"$[]user", // 可以通过"$[]"来引用数组
"keywords":"$[]String", // 同上
"age":20
}
json生成model开始
就拿我们项目中获取公众号数据的json转换为model为例子:
- 先上一个总的json数据
{
"data":[
{
"children":[
],
"courseId":13,
"id":408,
"name":"鸿洋",
"order":190000,
"parentChapterId":407,
"userControlSetTop":false,
"visible":1
},
{
"children":[
],
"courseId":13,
"id":409,
"name":"郭霖",
"order":190001,
"parentChapterId":407,
"userControlSetTop":false,
"visible":1
},
{
"children":[
],
"courseId":13,
"id":410,
"name":"玉刚说",
"order":190002,
"parentChapterId":407,
"userControlSetTop":false,
"visible":1
},
{
"children":[
],
"courseId":13,
"id":411,
"name":"承香墨影",
"order":190003,
"parentChapterId":407,
"userControlSetTop":false,
"visible":1
},
{
"children":[
],
"courseId":13,
"id":413,
"name":"Android群英传",
"order":190004,
"parentChapterId":407,
"userControlSetTop":false,
"visible":1
},
{
"children":[
],
"courseId":13,
"id":414,
"name":"code小生",
"order":190005,
"parentChapterId":407,
"userControlSetTop":false,
"visible":1
},
{
"children":[
],
"courseId":13,
"id":415,
"name":"谷歌开发者",
"order":190006,
"parentChapterId":407,
"userControlSetTop":false,
"visible":1
},
{
"children":[
],
"courseId":13,
"id":416,
"name":"奇卓社",
"order":190007,
"parentChapterId":407,
"userControlSetTop":false,
"visible":1
},
{
"children":[
],
"courseId":13,
"id":417,
"name":"美团技术团队",
"order":190008,
"parentChapterId":407,
"userControlSetTop":false,
"visible":1
},
{
"children":[
],
"courseId":13,
"id":420,
"name":"GcsSloop",
"order":190009,
"parentChapterId":407,
"userControlSetTop":false,
"visible":1
},
{
"children":[
],
"courseId":13,
"id":421,
"name":"互联网侦察",
"order":190010,
"parentChapterId":407,
"userControlSetTop":false,
"visible":1
},
{
"children":[
],
"courseId":13,
"id":427,
"name":"susion随心",
"order":190011,
"parentChapterId":407,
"userControlSetTop":false,
"visible":1
},
{
"children":[
],
"courseId":13,
"id":428,
"name":"程序亦非猿",
"order":190012,
"parentChapterId":407,
"userControlSetTop":false,
"visible":1
},
{
"children":[
],
"courseId":13,
"id":434,
"name":"Gityuan",
"order":190013,
"parentChapterId":407,
"userControlSetTop":false,
"visible":1
}
],
"errorCode":0,
"errorMsg":""
}
- 剔除多余的数据，也就是想data中的数据只留一个
{
"data":[
{
"children":[
],
"courseId":13,
"id":408,
"name":"鸿洋",
"order":190000,
"parentChapterId":407,
"userControlSetTop":false,
"visible":1
}
],
"errorCode":0,
"errorMsg":""
}
- 分析json：现在的json中有一个data字段，他是一个数组类型的，而且里面有数据，所以里面我们就可以提取出一个json文件gzhChild.json(名称很重要)
{
"children":[
],
"courseId":13,
"id":408,
"name":"鸿洋",
"order":190000,
"parentChapterId":407,
"userControlSetTop":false,
"visible":1
}
- 再看看前面引用的json_model如何声明数组？就是用字符串"$[]数组存储的内容对应的json文件名(也就是上面的json文件的文件名)",所以就得到外层json文件gzhReponse.json
{
"data": "$[]gzhChild",
"errorCode": 0,
"errorMsg": ""
}
- 将上面提取的两个json文件都放到jsons目录下，打开终端进入项目根目录运行如下指令
flutter packages pub run json_model
注意：如果生成失败，请检查一下你的文件名与引用是否正确，或者json文件格式是否正确
- 生成成功之后，你的lib/models文件下回多出5个文件，啥？5个文件？对，一个json文件对应会生成一个.dart和一个.g.dart文件，我们又两个json，也就是4个文件了，再加一个index文件，index文件主要是方便引用，比如一个页面需要使用10个model，我们不需要引用10个model，只需要引入index这个文件就好了
index文件内容
export 'gzhChild.dart' ;
export 'gzhResponse.dart' ;
