Flutter JSON解析与复杂模型转换技巧及实例
其实转换成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(),
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解析与复杂模型转换技巧及实例的更多相关文章
- Flutter实战视频-移动电商-22.JSON解析和复杂数据模型转换技巧
22.JSON解析和复杂数据模型转换技巧 json转Model类 创建model文件夹,在里面新建category.dart类 主要根据这个json来分析我们要做成类的样子 { ", &qu ...
- Flutter移动电商实战 --（22）JSON解析和复杂数据模型转换技巧
json转Model类 创建model文件夹,在里面新建category.dart类 主要根据这个json来分析我们要做成类的样子 { "code": "0", ...
- Flutter网络请求与JSON解析
本文介绍如何在Flutter中创建HTTP网络请求和对请求的json string进行类型解析. 网络请求 官方使用的是用dart io中的HttpClient发起的请求,但HttpClient本身功 ...
- Flutter实体与JSON解析的一种方法
vs code作为编辑器 1. 首先,json对象与字符串的转换是使用json.encode和json.decode的,需要导入import 'dart:convert'; 这里主要的自然不是这个,而 ...
- java中转换json方式（JSONArray，JSONObject），json解析
package com.yunos.tv.video.resource.controller.web; import java.util.ArrayList; import java.util.Has ...
- 【JSON解析】JSON解析
前三篇博客分别介绍了xml的三种解析方法,分别是SAX,DOM,PULL解析XML,兴趣的朋友可以去看一下这[XML解析(一)]SAX解析XML,[XML解析(二)]DOM解析XML,[XML解析(三 ...
- [译]Flutter JSON和序列化
[译]Flutter JSON和序列化 很难想象一个移动应用程序不需要与Web服务器通信或在某些时候容易存储结构化数据.制作网络连接的应用程序时,迟早需要消耗一些好的旧JSON. 本指南介绍了如何 ...
- iOS中JSON解析三方库的比较
网络数据解析框架 1. JsonModel 一个 JSON 模型转换库,有着比较简洁的接口.Model 需要继承自 JSONModel. 2. yyModel yyModel比较轻量(算上.h 只 ...
- Android okHttp网络请求之Json解析
前言: 前面两篇文章介绍了基于okHttp的post.get请求,以及文件的上传下载,今天主要介绍一下如何和Json解析一起使用?如何才能提高开发效率? okHttp相关文章地址: Android o ...
随机推荐
- [bzoj 3701] Olympic Games (莫比乌斯反演)
题目描述 给出n,m,l,r,modn,m,l,r,modn,m,l,r,mod 表示一个(n+1)∗(m+1)(n+1)*(m+1)(n+1)∗(m+1)的格点图,求能够互相看见的点对个数对modm ...
- Spark RDD 到 LabelPoint的转换(包含构造临时数据的方法)
题目: 将数据的某个特征作为label, 其他特征(或其他某几个特征)作为Feature, 转为LabelPoint 参考: http://www.it1352.com/220642.html 首先构 ...
- 服务器nginx配置显示文件而不是下载
有时候在服务器上配置某些文件比如TXT文件,在浏览器打开的时候,会弹出下载.如何只让他在浏览器中显示,而不是下载呢.在nginx配置文件中添加一行代码 add_header Content-Type ...
- HTML 002 基础
HTML 基础- 4个实例 HTML 标题 HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的. 实例 <h1>这是一个标题</h1& ...
- 洛谷 P2822 组合数问题 题解
今天又考试了...... 这是T2. Analysis 考试时想了一个判断质因数个数+打表的神奇方法,但没在每次输入n,m时把ans置0,50分滚粗. 看了题解才发现原来是杨辉三角+二维前缀和,果然还 ...
- 在默认使用apache中央仓库时, 报错 protocol_version
https://cloud.tencent.com/developer/ask/136221/answer/241408 2018年6月,为了提高安全性和符合现代标准,不安全的TLS 1.0和1.1协 ...
- firewalld命令集--firewall-cmd
Linux上新用的防火墙软件,跟iptables差不多的工具 补充说明 firewall-cmd 是 firewalld的字符界面管理工具,firewalld是centos7的一大特性,最大的好处有两 ...
- c++ 珊格迷宫问题
#demo1 #include<iostream> #include<ctime> #include<cstdlib> #include<queue> ...
- centos7 安装 Mysql 5.7.27，详细完整教程
1. 下载 MySQL yum包 wget http://repo.mysql.com/mysql57-community-release-el7-10.noarch.rpm 2.安装MySQL源 ...
- [TJOI2019]大中锋的游乐场——最短路+DP
题目链接: [TJOI2019]大中锋的游乐场 题目本质要求的还是最短路,但因为有第二维权值(汽水看成$+1$,汉堡看成$-1$)的限制,我们在最短路的基础上加上一维$f[i][j]$表示到达$i$节 ...