Flutter移动电商实战 --（29）列表页_商品列表数据模型建立

谁借莪１个温暖的怀抱￠ 2023-06-01 06:04 12阅读 0赞

简历数据模型

json生成dart类的网站：

[https://javiercbk.github.io/json\_to\_dart/][https_javiercbk.github.io_json_to_dart]

json数据

{"code":"0","message":"success","data":[{"image":"http://images.baixingliangfan.cn/compressedPic/20190116145309_40.jpg","oriPrice":2.50,"presentPrice":1.80,"goodsName":"哈尔滨冰爽啤酒330ml","goodsId":"3194330cf25f43c3934dbb8c2a964ade"},{"image":"http://images.baixingliangfan.cn/compressedPic/20190115185215_1051.jpg","oriPrice":2.00,"presentPrice":1.80,"goodsName":"燕京啤酒8°330ml","goodsId":"522a3511f4c545ab9547db074bb51579"},{"image":"http://images.baixingliangfan.cn/compressedPic/20190121102419_9362.jpg","oriPrice":1.98,"presentPrice":1.80,"goodsName":"崂山清爽8°330ml","goodsId":"bbdbd5028cc849c2998ff84fb55cb934"},{"image":"http://images.baixingliangfan.cn/compressedPic/20180712181330_9746.jpg","oriPrice":2.50,"presentPrice":1.90,"goodsName":"雪花啤酒8°清爽330ml","goodsId":"87013c4315e54927a97e51d0645ece76"},{"image":"http://images.baixingliangfan.cn/compressedPic/20180712180233_4501.jpg","oriPrice":2.50,"presentPrice":2.20,"goodsName":"崂山啤酒8°330ml","goodsId":"86388a0ee7bd4a9dbe79f4a38c8acc89"},{"image":"http://images.baixingliangfan.cn/compressedPic/20190116164250_1839.jpg","oriPrice":2.50,"presentPrice":2.30,"goodsName":"哈尔滨小麦王10°330ml","goodsId":"d31a5a337d43433385b17fe83ce2676a"},{"image":"http://images.baixingliangfan.cn/compressedPic/20180712181139_2653.jpg","oriPrice":2.70,"presentPrice":2.50,"goodsName":"三得利清爽啤酒10°330ml","goodsId":"74a1fb6adc1f458bb6e0788c4859bf54"},{"image":"http://images.baixingliangfan.cn/compressedPic/20190121162731_3928.jpg","oriPrice":2.75,"presentPrice":2.50,"goodsName":"三得利啤酒7.5度超纯啤酒330ml","goodsId":"d52fa8ba9a5f40e6955be9e28a764f34"},{"image":"http://images.baixingliangfan.cn/compressedPic/20180712180452_721.jpg","oriPrice":4.50,"presentPrice":3.70,"goodsName":"青岛啤酒11°330ml","goodsId":"a42c0585015540efa7e9642ec1183940"},{"image":"http://images.baixingliangfan.cn/compressedPic/20190121170407_7423.jpg","oriPrice":4.40,"presentPrice":4.00,"goodsName":"三得利清爽啤酒500ml 10.0°","goodsId":"94ec3df73f4446b5a5f0d80a8e51eb9d"},{"image":"http://images.baixingliangfan.cn/compressedPic/20180712181427_6101.jpg","oriPrice":4.50,"presentPrice":4.00,"goodsName":"雪花勇闯天涯啤酒8°330ml","goodsId":"d80462faab814ac6a7124cec3b868cf7"},{"image":"http://images.baixingliangfan.cn/compressedPic/20180717151537_3425.jpg","oriPrice":4.90,"presentPrice":4.10,"goodsName":"百威啤酒听装9.7°330ml","goodsId":"91a849140de24546b0de9e23d85399a3"},{"image":"http://images.baixingliangfan.cn/compressedPic/20190121101926_2942.jpg","oriPrice":4.95,"presentPrice":4.50,"goodsName":"崂山啤酒8°500ml","goodsId":"3758bbd933b145f2a9c472bf76c4920c"},{"image":"http://images.baixingliangfan.cn/compressedPic/20180712175422_518.jpg","oriPrice":5.00,"presentPrice":4.50,"goodsName":"百威3.6%大瓶9.7°P460ml","goodsId":"dc32954b66814f40977be0255cfdacca"},{"image":"http://images.baixingliangfan.cn/compressedPic/20180717151454_4834.jpg","oriPrice":5.00,"presentPrice":4.50,"goodsName":"青岛啤酒大听装500ml","goodsId":"fc85510c3af7428dbf1cb0c1bcb43711"},{"image":"http://images.baixingliangfan.cn/compressedPic/20180712181007_4229.jpg","oriPrice":5.50,"presentPrice":5.00,"goodsName":"三得利金纯生啤酒580ml 9°","goodsId":"14bd89f066ca4949af5e4d5a1d2afaf8"},{"image":"http://images.baixingliangfan.cn/compressedPic/20190121100752_4292.jpg","oriPrice":6.60,"presentPrice":6.00,"goodsName":"哈尔滨啤酒冰纯白啤（小麦啤酒）500ml","goodsId":"89bccd56a8e9465692ccc469cd4b442e"},{"image":"http://images.baixingliangfan.cn/compressedPic/20180712175656_777.jpg","oriPrice":7.20,"presentPrice":6.60,"goodsName":"百威啤酒500ml","goodsId":"3a94dea560ef46008dad7409d592775d"},{"image":"http://images.baixingliangfan.cn/compressedPic/20180712180754_2838.jpg","oriPrice":7.78,"presentPrice":7.00,"goodsName":"青岛啤酒皮尔森10.5°330ml","goodsId":"97adb29137fb47689146a397e5351926"},{"image":"http://images.baixingliangfan.cn/compressedPic/20190116164149_2165.jpg","oriPrice":7.78,"presentPrice":7.00,"goodsName":"青岛全麦白啤11°500ml","goodsId":"f78826d3eb0546f6a2e58893d4a41b43"}]}

# 生成实体类 #

![1090399-20190901184031542-977601029.png][]

在model文件夹下新建

新建类：categoryGoodsList.dart。把网站自动生成的类复制过来，然后修改类的名称为CategoryGoodsListModel

![1090399-20190901184057126-531492219.png][]

修改前：Data类我们也要修改名字

![1090399-20190901184129183-1902055649.png][]

修改后：

![1090399-20190901184157644-655738635.png][]

这样上线一些泛型的地方也需要修改

![1090399-20190901184229053-1748522246.png][]

# category\_page.dart #

引入我们刚才创建的实体类

![1090399-20190901184259681-423822788.png][]

import '../model/categoryGoodsList.dart';

# 修改商品列表的方法 #

json转model类

![1090399-20190901184358392-615182582.png][]

转载于:https://www.cnblogs.com/crazycode2/p/11426493.html

[https_javiercbk.github.io_json_to_dart]: https://javiercbk.github.io/json_to_dart/
[1090399-20190901184031542-977601029.png]: /images/20230601/7d89647d16834362a088e746d31710de.png
[1090399-20190901184057126-531492219.png]: /images/20230601/d4aab664eab34b85bdb6919279030961.png
[1090399-20190901184129183-1902055649.png]: /images/20230601/ecf8ca7539f94fbc83914384aacd1844.png
[1090399-20190901184157644-655738635.png]: /images/20230601/5b4ce6a5dce04aa89b8b3ac41331852f.png
[1090399-20190901184229053-1748522246.png]: /images/20230601/30631668e263455bbea656197ffbc774.png
[1090399-20190901184259681-423822788.png]: /images/20230601/2ddc81daa67445a4a125d03451a72184.png
[1090399-20190901184358392-615182582.png]: /images/20230601/22dfd642aed64a0b90fde0ab72025449.png

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关 Flutter移动电商实战 --（34）列表页_小BUG的修复

当高粱酒的子类没有数据返回的时候就会报错。 ![1090399-20190908214531452-668790134.png][] 解决接口空数据报错的问题 ![1

素颜马尾好姑娘i/ 2023年06月01日 06:04/ 0 赞/ 31 阅读

相关 Flutter移动电商实战 --（33）列表页_子类和商品列表交互效果

主要实现点击小类下面的列表跟着切换获取右侧下面的列表信息，即要传递大类的id也要传递小类的，所以需要把左侧的大类的id也要Provide化可以看下网站上的接口说明：

男娘i/ 2023年06月01日 06:04/ 0 赞/ 16 阅读

相关 Flutter移动电商实战 --（31）列表页_列表切换交互制作

点击左侧的大类右边的小类也跟着变化 ![1090399-20190901190730177-1226646699.png][] 新建provide 要改变哪里就建哪里

你的名字/ 2023年06月01日 06:04/ 0 赞/ 16 阅读

相关 Flutter移动电商实战 --（29）列表页_商品列表数据模型建立

简历数据模型 json生成dart类的网站： [https://javiercbk.github.io/json\_to\_dart/][https_javiercbk.g

谁借莪１个温暖的怀抱￠/ 2023年06月01日 06:04/ 0 赞/ 13 阅读

相关 Flutter移动电商实战 --（28）列表页_商品列表后台接口调试

主要调试商品列表页的接口 ![1090399-20190901183329735-742662012.png][] 这个接口是最难的因为有大类、小类还有上拉加载先配置

妖狐艹你老母/ 2023年06月01日 06:04/ 0 赞/ 13 阅读

相关移动电商——Flutter-Fluro引入和商品详细页建立

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Love The Way You Lie/ 2021年07月26日 02:07/ 0 赞/ 374 阅读

相关移动电商——Flutter-商品列表后台接口调试

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

迷南。/ 2021年07月25日 23:44/ 0 赞/ 479 阅读

相关移动电商——Flutter-列表页_Toast插件使用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

ゞ浴缸里的玫瑰/ 2021年07月25日 22:22/ 0 赞/ 434 阅读

相关移动电商——Flutter-商品列表UI界面布局

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Bertha 。/ 2021年07月25日 19:08/ 0 赞/ 583 阅读

相关移动电商——Flutter-商品列表数据模型建立

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

以你之姓@/ 2021年07月25日 14:19/ 0 赞/ 522 阅读