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

清疚 2021-09-11 05:04 320阅读 0赞

**项目目录创建**

![11172442-f7a57cb646a5d0c8.png][]

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][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结束 ###

[11172442-f7a57cb646a5d0c8.png]: /images/20210825/b6bb75c9efae4c9fbfb55606839a0c82.png
[json_model]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fflutterchina%2Fjson_model%2Fblob%2Fmaster%2FREADME-ZH.md