2.Flutter开发玩安卓app-项目基础搭建

项目目录创建

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

使用

1. 在工程根目录下创建一个名为 "jsons" 的目录;
2. 创建或拷贝Json文件到"jsons" 目录中 ;
3. 运行 pub run json_model (Dart VM工程)or flutter 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' ; 

json生成model结束