其实转换成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

左侧动态菜单的建立

快速建立了一个名字为LeftCategoryNavStatefulWidget。并声明了一个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(),
padding: EdgeInsets.only(left: ,top: ),
decoration: BoxDecoration(
color: Colors.white,
border: Border(
bottom: BorderSide(width: ,color: Colors.black12)
)
),
child: Text(list[index].mallCategoryName,style: TextStyle(fontSize: ScreenUtil().setSp())),
),
);
}

完善build方法

当子类别写好后,可以对build方法进行完善,build方法我们采用动态的ListView来写,代码如下:

@override
Widget build(BuildContext context) { return Container(
width: ScreenUtil().setWidth(),
decoration: BoxDecoration(
border: Border(
right: BorderSide(width: ,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(
width: ScreenUtil().setWidth(),
decoration: BoxDecoration(
border: Border(
right: BorderSide(width: ,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(),
padding: EdgeInsets.only(left: ,top: ),
decoration: BoxDecoration(
color: Colors.white,
border: Border(
bottom: BorderSide(width: ,color: Colors.black12)
)
),
child: Text(list[index].mallCategoryName,style: TextStyle(fontSize: ScreenUtil().setSp())),
),
);
} 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));
});
} }

Flutter JSON解析与复杂模型转换技巧及实例的更多相关文章

  1. Flutter实战视频-移动电商-22.JSON解析和复杂数据模型转换技巧

    22.JSON解析和复杂数据模型转换技巧 json转Model类 创建model文件夹,在里面新建category.dart类 主要根据这个json来分析我们要做成类的样子 { ", &qu ...

  2. Flutter移动电商实战 --(22)JSON解析和复杂数据模型转换技巧

    json转Model类 创建model文件夹,在里面新建category.dart类 主要根据这个json来分析我们要做成类的样子 { "code": "0", ...

  3. Flutter网络请求与JSON解析

    本文介绍如何在Flutter中创建HTTP网络请求和对请求的json string进行类型解析. 网络请求 官方使用的是用dart io中的HttpClient发起的请求,但HttpClient本身功 ...

  4. Flutter实体与JSON解析的一种方法

    vs code作为编辑器 1. 首先,json对象与字符串的转换是使用json.encode和json.decode的,需要导入import 'dart:convert'; 这里主要的自然不是这个,而 ...

  5. java中转换json方式(JSONArray,JSONObject),json解析

    package com.yunos.tv.video.resource.controller.web; import java.util.ArrayList; import java.util.Has ...

  6. 【JSON解析】JSON解析

    前三篇博客分别介绍了xml的三种解析方法,分别是SAX,DOM,PULL解析XML,兴趣的朋友可以去看一下这[XML解析(一)]SAX解析XML,[XML解析(二)]DOM解析XML,[XML解析(三 ...

  7. [译]Flutter JSON和序列化

    [译]Flutter JSON和序列化   很难想象一个移动应用程序不需要与Web服务器通信或在某些时候容易存储结构化数据.制作网络连接的应用程序时,迟早需要消耗一些好的旧JSON. 本指南介绍了如何 ...

  8. iOS中JSON解析三方库的比较

    网络数据解析框架 1.  JsonModel 一个 JSON 模型转换库,有着比较简洁的接口.Model 需要继承自 JSONModel. 2.  yyModel yyModel比较轻量(算上.h 只 ...

  9. Android okHttp网络请求之Json解析

    前言: 前面两篇文章介绍了基于okHttp的post.get请求,以及文件的上传下载,今天主要介绍一下如何和Json解析一起使用?如何才能提高开发效率? okHttp相关文章地址: Android o ...

随机推荐

  1. git忽略.idea文件

    只需要在.gitignore文件增加.idea如果你已经推送到远程仓库,那需要执行git rm -r --cached .idea去掉已经托管的文件

  2. REST与RPC区别

    OSI网络七层模型 第一层:应用层.定义了用于在网络中进行通信和传输数据的接口: 第二层:表示层.定义不同的系统中数据的传输格式,编码和解码规范等: 第三层:会话层.管理用户的会话,控制用户间逻辑连接 ...

  3. Django系列(四):多表操作

    1.创建模型 例:我们来假定下面这些概念,字段和关系 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情模型和作者模型之间是一对一(on ...

  4. linux系列(一):ls命令

    ls命令是linux下最常用的命令.ls命令就是list的缩写,默认下ls用来打印出当前目录的清单,如果ls指定其他目录,那么就会显示指定目录里的文件及文件夹清单. 通过ls 命令不仅可以查看linu ...

  5. wepy小程序项目

    # 安装(更新) wepy 命令行工具. cnpm install wepy-cli -g # 安装依赖包 cnpm install # 开发实时编译. npm run dev WePY开发文档参考 ...

  6. Codeforces Round #597 (Div. 2)

    A - Good ol' Numbers Coloring 题意:有无穷个格子,给定 \(a,b\) ,按以下规则染色: \(0\) 号格子白色:当 \(i\) 为正整数, \(i\) 号格子当 \( ...

  7. 【知识点】Java常用类库

    1.字符串 修改字符串内容用StringBuffer,没有“+”,需要用append(),否则用String 2.JVM 相关 Runtime,单例模式,通过getRuntime()获取实例,可以调用 ...

  8. 教你阅读 Cpython 的源码(二)

    第二部分:Python解释器进程 在上节教你阅读 Cpython 的源码(一)中,我们从编写Python到执行代码的过程中看到Python语法和其内存管理机制. 在本节,我们将从代码层面去讨论 ,Py ...

  9. 报错:Table 'sell.hibernate_sequence' doesn't exist

    错误信息:Table 'sell.hibernate_sequence' doesn't exist 错误原因:实体主键没有配置主键自增长 完整配置如下 /**主键id*/ @Id @Generate ...

  10. C++ 中virtual 用法

    一.virtual 修饰基类中的函数,派生类重写该函数: #include using namespace std; class A{ public: virtual void display(){ ...