其实转换成model类是有好处的，转换后可以减少上线后APP崩溃和出现异常，所以我们从这节课开始，要制作model类模型，然后用model的形式编辑UI界面。
类别json的分析
比如现在从后台得到了一串JSON数据：
{ "code": "0", "message": "success", "data": [{ "mallCategoryId": "4", "mallCategoryName": "白酒", "bxMallSubDto": [{ "mallSubId": "2c9f6c94621970a801626a35cb4d0175", "mallCategoryId": "4", "mallSubName": "名酒", "comments": "" }, { "mallSubId": "2c9f6c94621970a801626a363e5a0176", "mallCategoryId": "4", "mallSubName": "宝丰", "comments": "" }, { "mallSubId": "2c9f6c94621970a801626a3770620177", "mallCategoryId": "4", "mallSubName": "北京二锅头", "comments": "" }, { "mallSubId": "2c9f6c94679b4fb10167f7cc035c15a8", "mallCategoryId": "4", "mallSubName": "大明", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7cc2af915a9", "mallCategoryId": "4", "mallSubName": "杜康", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7cc535115aa", "mallCategoryId": "4", "mallSubName": "顿丘", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7cc77b215ab", "mallCategoryId": "4", "mallSubName": "汾酒", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7cca72e15ac", "mallCategoryId": "4", "mallSubName": "枫林", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7cccae215ad", "mallCategoryId": "4", "mallSubName": "高粱酒", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7ccf0d915ae", "mallCategoryId": "4", "mallSubName": "古井", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7cd1d6715af", "mallCategoryId": "4", "mallSubName": "贵州大曲", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7cd3f2815b0", "mallCategoryId": "4", "mallSubName": "国池", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7cd5d3015b1", "mallCategoryId": "4", "mallSubName": "国窖", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7cd7ced15b2", "mallCategoryId": "4", "mallSubName": "国台", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7cd9b9015b3", "mallCategoryId": "4", "mallSubName": "汉酱", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7cdbfd215b4", "mallCategoryId": "4", "mallSubName": "红星", "comments": null }, { "mallSubId": "2c9f6c946891d16801689474e2a70081", "mallCategoryId": "4", "mallSubName": "怀庄", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7cdddf815b5", "mallCategoryId": "4", "mallSubName": "剑南春", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7cdfd4815b6", "mallCategoryId": "4", "mallSubName": "江小白", "comments": null }, { "mallSubId": "2c9f6c94679b4fb1016802277c37160e", "mallCategoryId": "4", "mallSubName": "金沙", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7ce207015b7", "mallCategoryId": "4", "mallSubName": "京宫", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7ce46d415b8", "mallCategoryId": "4", "mallSubName": "酒鬼", "comments": null }, { "mallSubId": "2c9f6c94679b4fb101680226de23160d", "mallCategoryId": "4", "mallSubName": "口子窖", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7ce705515b9", "mallCategoryId": "4", "mallSubName": "郎酒", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7ce989e15ba", "mallCategoryId": "4", "mallSubName": "老口子", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7cec30915bb", "mallCategoryId": "4", "mallSubName": "龙江家园", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7cef15c15bc", "mallCategoryId": "4", "mallSubName": "泸州", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7cf156f15bd", "mallCategoryId": "4", "mallSubName": "鹿邑大曲", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7cf425b15be", "mallCategoryId": "4", "mallSubName": "毛铺", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7cf9dc915c0", "mallCategoryId": "4", "mallSubName": "绵竹", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7cfbf1c15c1", "mallCategoryId": "4", "mallSubName": "难得糊涂", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7cfdd7215c2", "mallCategoryId": "4", "mallSubName": "牛二爷", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7cf71e715bf", "mallCategoryId": "4", "mallSubName": "茅台", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7d7eda715c3", "mallCategoryId": "4", "mallSubName": "绵竹", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7d96e5c15c4", "mallCategoryId": "4", "mallSubName": "难得糊涂", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7dab93b15c5", "mallCategoryId": "4", "mallSubName": "牛二爷", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7dae16415c6", "mallCategoryId": "4", "mallSubName": "牛栏山", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7db11cb15c7", "mallCategoryId": "4", "mallSubName": "前门", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7db430c15c8", "mallCategoryId": "4", "mallSubName": "全兴", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7db6cac15c9", "mallCategoryId": "4", "mallSubName": "舍得", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7db9a4415ca", "mallCategoryId": "4", "mallSubName": "双沟", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7dc30b815cb", "mallCategoryId": "4", "mallSubName": "水井坊", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7dc543e15cc", "mallCategoryId": "4", "mallSubName": "四特", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7dc765c15cd", "mallCategoryId": "4", "mallSubName": "潭酒", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7dc988a15ce", "mallCategoryId": "4", "mallSubName": "沱牌", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7dcba5a15cf", "mallCategoryId": "4", "mallSubName": "五粮液", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7dcd9e815d0", "mallCategoryId": "4", "mallSubName": "西凤", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7dcf6d715d1", "mallCategoryId": "4", "mallSubName": "习酒", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7dd11b215d2", "mallCategoryId": "4", "mallSubName": "小白杨", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7dd2f3c15d3", "mallCategoryId": "4", "mallSubName": "洋河", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7dd969115d4", "mallCategoryId": "4", "mallSubName": "伊力特", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7ddb16c15d5", "mallCategoryId": "4", "mallSubName": "张弓", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7ddd6c715d6", "mallCategoryId": "4", "mallSubName": "中粮", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7de126815d7", "mallCategoryId": "4", "mallSubName": "竹叶青", "comments": null }], "comments": null, "image": "http://images.baixingliangfan.cn/firstCategoryPicture/20190131/20190131170036_4477.png" }, { "mallCategoryId": "1", "mallCategoryName": "啤酒", "bxMallSubDto": [{ "mallSubId": "2c9f6c946016ea9b016016f79c8e0000", "mallCategoryId": "1", "mallSubName": "百威", "comments": "" }, { "mallSubId": "2c9f6c94608ff843016095163b8c0177", "mallCategoryId": "1", "mallSubName": "福佳", "comments": "" }, { "mallSubId": "402880e86016d1b5016016db9b290001", "mallCategoryId": "1", "mallSubName": "哈尔滨", "comments": "" }, { "mallSubId": "402880e86016d1b5016016dbff2f0002", "mallCategoryId": "1", "mallSubName": "汉德", "comments": "" }, { "mallSubId": "2c9f6c946449ea7e01647cd6830e0022", "mallCategoryId": "1", "mallSubName": "崂山", "comments": "" }, { "mallSubId": "2c9f6c946449ea7e01647cd706a60023", "mallCategoryId": "1", "mallSubName": "林德曼", "comments": "" }, { "mallSubId": "2c9f6c94679b4fb10167f7e1411b15d8", "mallCategoryId": "1", "mallSubName": "青岛", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7e1647215d9", "mallCategoryId": "1", "mallSubName": "三得利", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7e182e715da", "mallCategoryId": "1", "mallSubName": "乌苏", "comments": null }, { "mallSubId": "2c9f6c9468118c9c016811ab16bf0001", "mallCategoryId": "1", "mallSubName": "雪花", "comments": null }, { "mallSubId": "2c9f6c9468118c9c016811aa6f440000", "mallCategoryId": "1", "mallSubName": "燕京", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7e19b8f15db", "mallCategoryId": "1", "mallSubName": "智美", "comments": null }], "comments": null, "image": "http://images.baixingliangfan.cn/firstCategoryPicture/20190131/20190131170044_9165.png" }, { "mallCategoryId": "2", "mallCategoryName": "葡萄酒", "bxMallSubDto": [{ "mallSubId": "2c9f6c9460337d540160337fefd60000", "mallCategoryId": "2", "mallSubName": "澳大利亚", "comments": "" }, { "mallSubId": "402880e86016d1b5016016e083f10010", "mallCategoryId": "2", "mallSubName": "德国", "comments": "" }, { "mallSubId": "402880e86016d1b5016016df1f92000c", "mallCategoryId": "2", "mallSubName": "法国", "comments": "" }, { "mallSubId": "2c9f6c94621970a801626a40feac0178", "mallCategoryId": "2", "mallSubName": "南非", "comments": "" }, { "mallSubId": "2c9f6c94679b4fb10167f7e5c9a115dc", "mallCategoryId": "2", "mallSubName": "葡萄牙", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7e5e68f15dd", "mallCategoryId": "2", "mallSubName": "西班牙", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7e609f515de", "mallCategoryId": "2", "mallSubName": "新西兰", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7e6286a15df", "mallCategoryId": "2", "mallSubName": "意大利", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7e6486615e0", "mallCategoryId": "2", "mallSubName": "智利", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7e66c6815e1", "mallCategoryId": "2", "mallSubName": "中国", "comments": null }], "comments": null, "image": "http://images.baixingliangfan.cn/firstCategoryPicture/20190131/20190131170053_878.png" }, { "mallCategoryId": "3", "mallCategoryName": "清酒洋酒", "bxMallSubDto": [{ "mallSubId": "402880e86016d1b5016016e135440011", "mallCategoryId": "3", "mallSubName": "清酒", "comments": "" }, { "mallSubId": "402880e86016d1b5016016e171cc0012", "mallCategoryId": "3", "mallSubName": "洋酒", "comments": "" }], "comments": null, "image": "http://images.baixingliangfan.cn/firstCategoryPicture/20190131/20190131170101_6957.png" }, { "mallCategoryId": "5", "mallCategoryName": "保健酒", "bxMallSubDto": [{ "mallSubId": "2c9f6c94609a62be0160a02d1dc20021", "mallCategoryId": "5", "mallSubName": "黄酒", "comments": "" }, { "mallSubId": "2c9f6c94648837980164883ff6980000", "mallCategoryId": "5", "mallSubName": "药酒", "comments": "" }], "comments": null, "image": "http://images.baixingliangfan.cn/firstCategoryPicture/20190131/20190131170110_6581.png" }, { "mallCategoryId": "2c9f6c946449ea7e01647ccd76a6001b", "mallCategoryName": "预调酒", "bxMallSubDto": [{ "mallSubId": "2c9f6c946449ea7e01647d02f6250026", "mallCategoryId": "2c9f6c946449ea7e01647ccd76a6001b", "mallSubName": "果酒", "comments": "" }, { "mallSubId": "2c9f6c946449ea7e01647d031bae0027", "mallCategoryId": "2c9f6c946449ea7e01647ccd76a6001b", "mallSubName": "鸡尾酒", "comments": "" }, { "mallSubId": "2c9f6c946449ea7e01647d03428f0028", "mallCategoryId": "2c9f6c946449ea7e01647ccd76a6001b", "mallSubName": "米酒", "comments": "" }], "comments": null, "image": "http://images.baixingliangfan.cn/firstCategoryPicture/20190131/20190131170124_4760.png" }, { "mallCategoryId": "2c9f6c946449ea7e01647ccf3b97001d", "mallCategoryName": "下酒小菜", "bxMallSubDto": [{ "mallSubId": "2c9f6c946449ea7e01647dc18e610035", "mallCategoryId": "2c9f6c946449ea7e01647ccf3b97001d", "mallSubName": "熟食", "comments": "" }, { "mallSubId": "2c9f6c946449ea7e01647dc1d9070036", "mallCategoryId": "2c9f6c946449ea7e01647ccf3b97001d", "mallSubName": "火腿", "comments": "" }, { "mallSubId": "2c9f6c946449ea7e01647dc1fc3e0037", "mallCategoryId": "2c9f6c946449ea7e01647ccf3b97001d", "mallSubName": "速冻食品", "comments": "" }], "comments": null, "image": "http://images.baixingliangfan.cn/firstCategoryPicture/20190131/20190131170133_4419.png" }, { "mallCategoryId": "2c9f6c946449ea7e01647ccdb0e0001c", "mallCategoryName": "饮料", "bxMallSubDto": [{ "mallSubId": "2c9f6c946449ea7e01647d09cbf6002d", "mallCategoryId": "2c9f6c946449ea7e01647ccdb0e0001c", "mallSubName": "茶饮", "comments": "" }, { "mallSubId": "2c9f6c946449ea7e01647d09f7e8002e", "mallCategoryId": "2c9f6c946449ea7e01647ccdb0e0001c", "mallSubName": "水饮", "comments": "" }, { "mallSubId": "2c9f6c946449ea7e01647d0a27e1002f", "mallCategoryId": "2c9f6c946449ea7e01647ccdb0e0001c", "mallSubName": "功能饮料", "comments": "" }, { "mallSubId": "2c9f6c946449ea7e01647d0b1d4d0030", "mallCategoryId": "2c9f6c946449ea7e01647ccdb0e0001c", "mallSubName": "果汁", "comments": "" }, { "mallSubId": "2c9f6c946449ea7e01647d14192b0031", "mallCategoryId": "2c9f6c946449ea7e01647ccdb0e0001c", "mallSubName": "含乳饮料", "comments": "" }, { "mallSubId": "2c9f6c946449ea7e01647d24d9600032", "mallCategoryId": "2c9f6c946449ea7e01647ccdb0e0001c", "mallSubName": "碳酸饮料", "comments": "" }], "comments": null, "image": "http://images.baixingliangfan.cn/firstCategoryPicture/20190131/20190131170143_361.png" }, { "mallCategoryId": "2c9f6c946449ea7e01647cd108b60020", "mallCategoryName": "乳制品", "bxMallSubDto": [{ "mallSubId": "2c9f6c946449ea7e01647dd4ac8c0048", "mallCategoryId": "2c9f6c946449ea7e01647cd108b60020", "mallSubName": "常温纯奶", "comments": "" }, { "mallSubId": "2c9f6c946449ea7e01647dd4f6a40049", "mallCategoryId": "2c9f6c946449ea7e01647cd108b60020", "mallSubName": "常温酸奶", "comments": "" }, { "mallSubId": "2c9f6c946449ea7e01647dd51ab7004a", "mallCategoryId": "2c9f6c946449ea7e01647cd108b60020", "mallSubName": "低温奶", "comments": "" }], "comments": null, "image": "http://images.baixingliangfan.cn/firstCategoryPicture/20190131/20190131170151_9234.png" }, { "mallCategoryId": "2c9f6c946449ea7e01647ccfddb3001e", "mallCategoryName": "休闲零食", "bxMallSubDto": [{ "mallSubId": "2c9f6c946449ea7e01647dc51d93003c", "mallCategoryId": "2c9f6c946449ea7e01647ccfddb3001e", "mallSubName": "方便食品", "comments": "" }, { "mallSubId": "2c9f6c946449ea7e01647dd204dc0040", "mallCategoryId": "2c9f6c946449ea7e01647ccfddb3001e", "mallSubName": "面包糕点", "comments": "" }, { "mallSubId": "2c9f6c946449ea7e01647dd22f760041", "mallCategoryId": "2c9f6c946449ea7e01647ccfddb3001e", "mallSubName": "糖果巧克力", "comments": "" }, { "mallSubId": "2c9f6c946449ea7e01647dd254530042", "mallCategoryId": "2c9f6c946449ea7e01647ccfddb3001e", "mallSubName": "膨化食品", "comments": "" }, { "mallSubId": "2c9f6c94679b4fb10167f7fa132b15e7", "mallCategoryId": "2c9f6c946449ea7e01647ccfddb3001e", "mallSubName": "坚果炒货", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7f4bfc415e2", "mallCategoryId": "2c9f6c946449ea7e01647ccfddb3001e", "mallSubName": "肉干豆干", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7f5027a15e3", "mallCategoryId": "2c9f6c946449ea7e01647ccfddb3001e", "mallSubName": "饼干", "comments": null }, { "mallSubId": "2c9f6c94679b4fb10167f7f530fd15e4", "mallCategoryId": "2c9f6c946449ea7e01647ccfddb3001e", "mallSubName": "冲调", "comments": null }, { "mallSubId": "2c9f6c94683a6b0d016846b49436003b", "mallCategoryId": "2c9f6c946449ea7e01647ccfddb3001e", "mallSubName": "休闲水果", "comments": null }], "comments": null, "image": "http://images.baixingliangfan.cn/firstCategoryPicture/20190131/20190131170200_7553.png" }, { "mallCategoryId": "2c9f6c946449ea7e01647cd08369001f", "mallCategoryName": "粮油调味", "bxMallSubDto": [{ "mallSubId": "2c9f6c946449ea7e01647dd2e8270043", "mallCategoryId": "2c9f6c946449ea7e01647cd08369001f", "mallSubName": "油/粮食", "comments": "" }, { "mallSubId": "2c9f6c946449ea7e01647dd31bca0044", "mallCategoryId": "2c9f6c946449ea7e01647cd08369001f", "mallSubName": "调味品", "comments": "" }, { "mallSubId": "2c9f6c946449ea7e01647dd35a980045", "mallCategoryId": "2c9f6c946449ea7e01647cd08369001f", "mallSubName": "酱菜罐头", "comments": "" }], "comments": null, "image": "http://images.baixingliangfan.cn/firstCategoryPicture/20181212/20181212115842_9733.png" }, { "mallCategoryId": "2c9f6c9468a85aef016925444ddb271b", "mallCategoryName": "积分商品", "bxMallSubDto": [], "comments": null, "image": "http://images.baixingliangfan.cn/firstCategoryPicture/20190225/20190225232703_9950.png" }] }
模型层的建立
把模型层单独放到一个文件夹里，然后建立一个category.dart文件。这个文件就是要结合json文件，形成的modle文件。文件里大量使用了dart中的 factory语法。
工厂构造函数
factory 关键字的功能，当实现构造函数但是不想每次都创建该类的一个实例的时候使用。
工厂模式是我们最常用的实例化对象模式了，是用工厂方法代替new操作的一种模式。用简单明了的方式解释，模式上类似于面向对象的多态，用起来和静态方法差不多。高雅和低俗的结合，相当于听着贝多芬的交响乐《命运》，看着波多野结衣的岛国小电影，只要你爽，什么都可以。
我们先制作了一个大分类的Class,代码如下：
class CategoryBigModel{ String mallCategoryId; //类别ID String mallCategoryName; //类型名称 List<dynamic> bxMallSubDto; //子类 dynamic动态的 Null comments; //描述 String image; //图片 //构造函数 CategoryBigModel({ this.mallCategoryId, this.mallCategoryName, this.bxMallSubDto, this.comments, this.image }); //工厂模式-用这种模式可以省略New关键字 factory CategoryBigModel.fromJson(dynamic json){ return CategoryBigModel( mallCategoryId: json['mallCategoryId'], mallCategoryName:json['mallCategoryName'], bxMallSubDto:json['bxMallSubDto'], comments:json['comments'], image:json['image'], ); } }
这个只是单个的一个大类信息的模型，但我们是一个列表，这时候就需要制作一个列表的模型，而这个List里边是我们定义的CategoryBigModel模型。简单理解就是先定义一个单项模型，然后再定义个列表的模型。
class CategoryBigListModel { List<CategoryBigModel> data; CategoryBigListModel(this.data); factory CategoryBigListModel.formJson(List json){ return CategoryBigListModel( json.map((i)=>CategoryBigModel.fromJson((i))).toList() ); } }
这样就建立好了一个模型，其实这个模型还可以继续建立，以后的课程中也会逐渐深入。这里到这里，相信大家都掌握了建立模型的方法。
数据模型的使用
使用数据模型就简单很多了。直接声明变量，调用formJson方法就可以了。直接在_getCategory()方法里。记得先引入数据模型类，然后用.的形式进行输出了。
import '../model/category.dart';
void _getCategory() async{ await request('post', 'getCategory').then((val){ var data = json.decode(val.toString()); //print(data); CategoryBigListModel list = CategoryBigListModel.formJson(data['data']); list.data.forEach((item) => print(item.mallCategoryName)); });
}
写完这些，你就可以在控制台看到结果了。如果是第一次接触数据模型，可能还是稍微有些绕的。
json_to_dart的使用
如果我们得到一个特别复杂的JSON,有时候会无从下手开始写Model,这时候就可以使用一些辅助工具。我认为json_to_dart是比较好用的一个。它可以直接把json转换成dart类，然后进行一定的修改，就可以快乐的使用了。工作中我拿到一个json，都是先操作一下，然后再改的。算是一个小窍门吧。
地址：https://javiercbk.github.io/json_to_dart/
实例：分类列表
自动生成model模型
改名为CategoryModel
左侧动态菜单的建立
快速建立了一个名字为LeftCategoryNav的StatefulWidget。并声明了一个List数据，起名就叫list。具体代码如下：
//左侧大类导航 class LeftCategoryNav extends StatefulWidget { _LeftCategoryNavState createState() => _LeftCategoryNavState(); } class _LeftCategoryNavState extends State<LeftCategoryNav> { List list=[]; @override Widget build(BuildContext context) { return Container(); } }
把上面的调用后台类别的方法拷贝到这里，并进行改写。注意这里我们使用了setState来改变lsit 的状态，这样我们从后台获取数据后，页面就会有数据。
void _getCategory()async{ await request('post','getCategory').then((val){ var data = json.decode(val.toString()); //print(data); CategoryModel category = CategoryModel.fromJson(data); setState(() { list = category.data; }); //list.data.forEach((item)=>print(item.mallCategoryName)); }); }
编写大类子项
把大类里的子项分成一个单独的方法，这样可以起到复用的作用。主要知识点是用模型的形式展示数据。
Widget _leftInkWell(int index){ return InkWell( onTap: (){}, child: Container( height: ScreenUtil().setHeight(100), padding: EdgeInsets.only(left: 10,top: 13), decoration: BoxDecoration( color: Colors.white, border: Border( bottom: BorderSide( 1,color: Colors.black12) ) ), child: Text(list[index].mallCategoryName,style: TextStyle(fontSize: ScreenUtil().setSp(28))), ), ); }
完善build方法
当子类别写好后，可以对build方法进行完善，build方法我们采用动态的ListView来写，代码如下：
@override Widget build(BuildContext context) { return Container( ScreenUtil().setWidth(180), decoration: BoxDecoration( border: Border( right: BorderSide( 1,color: Colors.black12) ) ), child: ListView.builder( itemCount: list.length, itemBuilder:(context,index){ return _leftInkWell(index); } ), ); }
我们希望获取数据只在Widget初始化的时候进行，所以再重写一个initState方法。
@override void initState() { _getCategory(); //请求接口的数据 super.initState(); }
写完这步，就可以进行预览了，在分类页面也该已经展示出了大类的一个类别列表。
完整代码：
import 'package:flutter/material.dart'; import '../service/service_method.dart'; import 'dart:convert'; import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:flutter_easyrefresh/easy_refresh.dart'; import '../model/category.dart'; class CategoryPage extends StatefulWidget { _CategoryPageState createState() => _CategoryPageState(); } class _CategoryPageState extends State<CategoryPage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('商品分类')), body: Container( child: Row( children: <Widget>[ LeftCategoryNav(), ] ) ) ); } } //左侧大类导航 class LeftCategoryNav extends StatefulWidget { _LeftCategoryNavState createState() => _LeftCategoryNavState(); } class _LeftCategoryNavState extends State<LeftCategoryNav> { List list = []; @override void initState() { _getCategory(); //请求接口的数据 super.initState(); } @override Widget build(BuildContext context) { return Container( ScreenUtil().setWidth(180), decoration: BoxDecoration( border: Border( right: BorderSide( 1,color: Colors.black12) ) ), child: ListView.builder( itemCount: list.length, itemBuilder:(context,index){ return _leftInkWell(index); } ), ); } Widget _leftInkWell(int index){ return InkWell( onTap: (){}, child: Container( height: ScreenUtil().setHeight(100), padding: EdgeInsets.only(left: 10,top: 13), decoration: BoxDecoration( color: Colors.white, border: Border( bottom: BorderSide( 1,color: Colors.black12) ) ), child: Text(list[index].mallCategoryName,style: TextStyle(fontSize: ScreenUtil().setSp(28))), ), ); } void _getCategory()async{ await request('post','getCategory').then((val){ var data = json.decode(val.toString()); //print(data); CategoryModel category = CategoryModel.fromJson(data); setState(() { list = category.data; }); //list.data.forEach((item)=>print(item.mallCategoryName)); }); } }