Config.dart

  1. class Config{
  2. static String domain='http://jd.itying.com/';
  3. }

  FocusModel.dart

  1. class FocusModel {
  2. List<FocusItemModel> result;
  3.  
  4. FocusModel({this.result});
  5.  
  6. FocusModel.fromJson(Map<String, dynamic> json) {
  7. if (json['result'] != null) {
  8. result = new List<FocusItemModel>();
  9. json['result'].forEach((v) {
  10. result.add(new FocusItemModel.fromJson(v));
  11. });
  12. }
  13. }
  14.  
  15. Map<String, dynamic> toJson() {
  16. final Map<String, dynamic> data = new Map<String, dynamic>();
  17. if (this.result != null) {
  18. data['result'] = this.result.map((v) => v.toJson()).toList();
  19. }
  20. return data;
  21. }
  22. }
  23.  
  24. class FocusItemModel {
  25. String sId;
  26. String title;
  27. String status;
  28. String pic;
  29. String url;
  30.  
  31. FocusItemModel({this.sId, this.title, this.status, this.pic, this.url});
  32.  
  33. FocusItemModel.fromJson(Map<String, dynamic> json) {
  34. sId = json['_id'];
  35. title = json['title'];
  36. status = json['status'];
  37. pic = json['pic'];
  38. url = json['url'];
  39. }
  40.  
  41. Map<String, dynamic> toJson() {
  42. final Map<String, dynamic> data = new Map<String, dynamic>();
  43. data['_id'] = this.sId;
  44. data['title'] = this.title;
  45. data['status'] = this.status;
  46. data['pic'] = this.pic;
  47. data['url'] = this.url;
  48. return data;
  49. }
  50. }

  ProductModel.dart

  1. class ProductModel {
  2. List<ProductItemModel> result;
  3.  
  4. ProductModel({this.result});
  5.  
  6. ProductModel.fromJson(Map<String, dynamic> json) {
  7. if (json['result'] != null) {
  8. result = new List<ProductItemModel>();
  9. json['result'].forEach((v) {
  10. result.add(new ProductItemModel.fromJson(v));
  11. });
  12. }
  13. }
  14.  
  15. Map<String, dynamic> toJson() {
  16. final Map<String, dynamic> data = new Map<String, dynamic>();
  17. if (this.result != null) {
  18. data['result'] = this.result.map((v) => v.toJson()).toList();
  19. }
  20. return data;
  21. }
  22. }
  23.  
  24. class ProductItemModel {
  25. String sId;
  26. String title;
  27. String cid;
  28. Object price;
  29. String oldPrice;
  30. String pic;
  31. String sPic;
  32.  
  33. ProductItemModel(
  34. {this.sId,
  35. this.title,
  36. this.cid,
  37. this.price,
  38. this.oldPrice,
  39. this.pic,
  40. this.sPic});
  41.  
  42. ProductItemModel.fromJson(Map<String, dynamic> json) {
  43. sId = json['_id'];
  44. title = json['title'];
  45. cid = json['cid'];
  46. price = json['price'];
  47. oldPrice = json['old_price'];
  48. pic = json['pic'];
  49. sPic = json['s_pic'];
  50. }
  51.  
  52. Map<String, dynamic> toJson() {
  53. final Map<String, dynamic> data = new Map<String, dynamic>();
  54. data['_id'] = this.sId;
  55. data['title'] = this.title;
  56. data['cid'] = this.cid;
  57. data['price'] = this.price;
  58. data['old_price'] = this.oldPrice;
  59. data['pic'] = this.pic;
  60. data['s_pic'] = this.sPic;
  61. return data;
  62. }
  63. }

  Home.dart

  1. import 'package:flutter/material.dart';
  2. import 'package:flutter_swiper/flutter_swiper.dart';
  3. import '../../services/ScreenAdaper.dart';
  4.  
  5. // import 'dart:convert';
  6. import '../../config/Config.dart';
  7. import 'package:dio/dio.dart';
  8.  
  9. //轮播图类模型:
  10. import '../../model/FocusModel.dart';
  11.  
  12. //热门推荐:
  13. import '../../model/ProductModel.dart';
  14.  
  15. class HomePage extends StatefulWidget {
  16. HomePage({Key key}) : super(key: key);
  17.  
  18. _HomePageState createState() => _HomePageState();
  19. }
  20.  
  21. class _HomePageState extends State<HomePage> {
  22. //轮播图:
  23. //flutter run -d all 链接多个设备的命令:
  24. List _focusData = [];
  25. List _hotProductList = [];
  26. List _bestProductList = [];
  27. void initState() {
  28. super.initState();
  29. _getFocusData();
  30. _getHotProductData();
  31. _getBestProductData();
  32. }
  33.  
  34. //获取轮播图数据:
  35. _getFocusData() async {
  36. var api = '${Config.domain}/api/focus';
  37. var result = await Dio().get(api);
  38. var focusList = FocusModel.fromJson(result.data);
  39. focusList.result.forEach((value) {
  40. print(value.title);
  41. print(value.pic);
  42. });
  43. setState(() {
  44. this._focusData = focusList.result;
  45. });
  46. }
  47.  
  48. //获取猜你喜欢的数据:
  49. _getHotProductData() async {
  50. var api = '${Config.domain}api/plist?is_hot=1';
  51. var result = await Dio().get(api);
  52. var hotProductList = ProductModel.fromJson(result.data);
  53. setState(() {
  54. this._hotProductList = hotProductList.result;
  55. });
  56. }
  57.  
  58. //获取热门推荐的数据:
  59. _getBestProductData() async {
  60. var api = '${Config.domain}api/plist?is_best=1';
  61. var result = await Dio().get(api);
  62. var bestProductList = ProductModel.fromJson(result.data);
  63. setState(() {
  64. this._bestProductList = bestProductList.result;
  65. });
  66. }
  67.  
  68. Widget _swiperWidget() {
  69. // List<Map> imgList = [
  70. // {"url": "https://www.itying.com/images/flutter/slide01.jpg"},
  71. // {"url": "https://www.itying.com/images/flutter/slide02.jpg"},
  72. // {"url": "https://www.itying.com/images/flutter/slide03.jpg"}
  73. // ];
  74. if (this._focusData.length > ) {
  75. return Container(
  76. child: AspectRatio(
  77. aspectRatio: / ,
  78. child: Swiper(
  79. itemBuilder: (BuildContext context, int index) {
  80. String pic = this._focusData[index].pic;
  81. pic = Config.domain + pic.replaceAll('\\', '/');
  82. return new Image.network(
  83. "${pic}",
  84. fit: BoxFit.fill,
  85. );
  86. },
  87. itemCount: this._focusData.length,
  88. pagination: new SwiperPagination(),
  89. control: new SwiperControl(),
  90. autoplay: true,
  91. ),
  92. ),
  93. );
  94. } else {
  95. return Text('加载中~');
  96. }
  97. }
  98.  
  99. //标题:
  100. Widget _titleWidget(value) {
  101. return Container(
  102. height: ScreenAdaper.height(),
  103. margin: EdgeInsets.only(left: ScreenAdaper.width()),
  104. padding: EdgeInsets.only(left: ScreenAdaper.width()),
  105. decoration: BoxDecoration(
  106. border: Border(
  107. left: BorderSide(
  108. color: Colors.red, width: ScreenAdaper.width()))),
  109. child: Text(value, style: TextStyle(color: Colors.black54)),
  110. );
  111. }
  112.  
  113. //热门商品:
  114. Widget _hotProductListWidget() {
  115. if (this._hotProductList.length > ) {
  116. return Container(
  117. height: ScreenAdaper.height(),
  118. padding: EdgeInsets.all(ScreenAdaper.width()),
  119. // width: double.infinity, //寬度自適應
  120. child: ListView.builder(
  121. scrollDirection: Axis.horizontal,
  122. itemBuilder: (contxt, index) {
  123. String sPic = this._hotProductList[index].sPic;
  124. sPic = Config.domain + sPic.replaceAll('\\', '/');
  125. return Column(
  126. children: <Widget>[
  127. Container(
  128. height: ScreenAdaper.height(),
  129. width: ScreenAdaper.width(),
  130. margin: EdgeInsets.only(right: ScreenAdaper.width()),
  131. child: Image.network("${sPic}", fit: BoxFit.cover),
  132. ),
  133. Container(
  134. padding: EdgeInsets.only(top: ScreenAdaper.height()),
  135. height: ScreenAdaper.height(),
  136. child: Text(
  137. '${this._hotProductList[index].price}',
  138. style: TextStyle(color: Colors.red),
  139. ),
  140. )
  141. ],
  142. );
  143. },
  144. itemCount: this._hotProductList.length,
  145. ),
  146. );
  147. } else {
  148. return Text('暂无热门推荐数据');
  149. }
  150. }
  151.  
  152. Widget _recProductListWidget() {
  153. var itemWidth = (ScreenAdaper.getScreenWidth() - ) / ;
  154. return Container(
  155. padding: EdgeInsets.all(),
  156. child: Wrap(
  157. runSpacing: ,
  158. spacing: ,
  159. children: this._bestProductList.map((value) {
  160. //图片:
  161. var sPic = value.sPic;
  162. sPic = Config.domain + sPic.replaceAll('\\', '/');
  163.  
  164. return Container(
  165. padding: EdgeInsets.all(ScreenAdaper.width()),
  166. width: itemWidth,
  167. decoration: BoxDecoration(
  168. border: Border.all(color: Colors.black12, width: )),
  169. child: Column(
  170. children: <Widget>[
  171. Container(
  172. width: double.infinity,
  173. child: AspectRatio(
  174. aspectRatio: / ,
  175. child: Image.network("${sPic}", fit: BoxFit.cover),
  176. ),
  177. ),
  178. Padding(
  179. padding: EdgeInsets.only(top: ScreenAdaper.height()),
  180. child: Text(
  181. "${value.title}",
  182. maxLines: ,
  183. overflow: TextOverflow.ellipsis,
  184. style: TextStyle(color: Colors.black54),
  185. ),
  186. ),
  187. Padding(
  188. padding: EdgeInsets.only(top: ScreenAdaper.height()),
  189. child: Stack(
  190. children: <Widget>[
  191. Align(
  192. alignment: Alignment.centerLeft,
  193. child: Text(
  194. "${value.price}",
  195. style: TextStyle(color: Colors.red, fontSize: ),
  196. ),
  197. ),
  198. Align(
  199. alignment: Alignment.centerRight,
  200. child: Text(
  201. "¥${value.oldPrice}",
  202. style: TextStyle(
  203. color: Colors.black54,
  204. fontSize: ,
  205. decoration: TextDecoration.lineThrough),
  206. ),
  207. )
  208. ],
  209. ),
  210. )
  211. ],
  212. ),
  213. );
  214. }).toList(),
  215. ),
  216. );
  217. }
  218.  
  219. @override
  220. Widget build(BuildContext context) {
  221. ScreenAdaper.init(context);
  222. return ListView(
  223. children: <Widget>[
  224. _swiperWidget(),
  225. SizedBox(height: ScreenAdaper.height()),
  226. _titleWidget("猜你喜欢"),
  227. _hotProductListWidget(),
  228. SizedBox(height: ScreenAdaper.height()),
  229. _titleWidget("热门推荐"),
  230. _recProductListWidget()
  231. ],
  232. );
  233. }
  234. }

增加依赖:

dio: ^2.1.10

05-06 Flutter JSON和序列化反序列化、创建模型类转换Json数据、轮播图数据渲染:Flutter创建商品数据模型 、请求Api接口渲染热门商品 推荐商品的更多相关文章

  1. Flutter学习五之网络请求和轮播图的实现

    上期讲到了,怎样实现一个下拉刷新和加载更多的列表,数据更新,需要使用到网络请求,在flutter中,怎样实现一个网络请求呢?官方使用的是dart io中的HttpClient发起的请求,但HttpCl ...

  2. iOS回顾笔记(05) -- 手把手教你封装一个广告轮播图框架

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  3. 利用 C# dynamic 减少创建模型类

    C# 的 dynamic 关键字可以是C#可以像 javascript 这种弱类型语言一样具有随时可以添加属性的能力.C# 是一种强类型语言,dynamic 要摆脱类型的限制,自然是有代价的.这里不讨 ...

  4. Flutter轮播图

    前端开发当中最有意思的就是实现动画特效,Flutter提供的各种动画组件可以方便实现各种动画效果.Flutter中的动画组件主要分为两类: 隐式动画控件:只需设置组件开始值,结束值,执行时间,比如An ...

  5. 7、Flutter banner_view 轮播图的使用

    1.前言 实现轮播图,效果如下: 2.实现 将采用 banner_view 实现:资源库地址 2.1.yaml 引入依赖 在 pubspec.yaml 声明需要引用的库,执行命令 flutter pa ...

  6. 28 Flutter 轮播图 flutter_swiper

    中文地址: https://github.com/best-flutter/flutter_swiper/blob/master/README-ZH.md 基本参数 参数 默认值 描述 scrollD ...

  7. day94:flask:Jinjia2模板引擎&flask中的CSRF攻击&Flask-SQLAlchemy的创建模型类和基本的增删改查

    目录 1.Jinjia2模板引擎 1.Jinjia2加载模板并传递数据到模板中 2.Jinjia2的模板语句 3.模板中特有的变量和函数 4.模板中内置的过滤器 5.自定义过滤器 6.模板继承 2.在 ...

  8. JSON实现序列化dump和dumps方法,JSON实现反序列化loads和load方法

    通过文件操作,我们可以将字符串写入到一个本地文件.但是,如果是一个对象(例如列表.字典.元组等),就无 法直接写入到一个文件里,需要对这个对象进行序列化,然后才能写入到文件里. 设计一套协议,按照某种 ...

  9. 二进制数据的序列化反序列化和Json的序列化反序列化的重要区别

    前言:最近一个一个很奇怪的问题,很明白的说,就是没看懂,参照下面的代码: /// <summary> /// 反序列化对象 /// </summary> /// <typ ...

随机推荐

  1. Python(phone)模块获取手机号归属地、区号、运营商等

    Python(phone)模块获取手机号归属地.区号.运营商等 一.我使用的是python3,可以自行搜索下载 二.安装phone模块, pip install phone 三.测试代码如下: fro ...

  2. 中国大学MOOC课程信息之数据分析可视化一

    版权声明:本文为博主原创文章,转载 请注明出处:https://blog.csdn.net/sc2079/article/details/82263391 9月2日更:中国大学MOOC课程信息之数据分 ...

  3. KubeEdge v0.2发布,全球首个K8S原生的边缘计算平台开放云端代码

    KubeEdge开源背景 KubeEdge在18年11月24日的上海KubeCon上宣布开源,技术圈曾掀起一阵讨论边缘计算的风潮,从此翻开了边缘计算和云计算联动的新篇章. KubeEdge即Kube+ ...

  4. PHP 调用 exec 执行中文命令的坑

    服务器系统Linux通过php exec 执行rar x 解压命令 保持目录结构,压缩包内英文目录正常解压中文目录解压失败,请问有什么办法可以解决直接在终端命令进行解压是没有问题的 最终解决办法 $s ...

  5. Redis单实例数据迁移到集群

    环境说明 单机redis redis集群 192.168.41.101:7000 master 192.168.41.101:7001 master 192.168.41.102:7000 maste ...

  6. Controllers返回View的一个完整流程

    详细说明一个MVC框架下,返回一个view的原理.如下图: 上图粗略的说明了一个返回View的流程,细节如下: 1.定义Model类: 2.定义接口添加接口约束为class: 3.定义接口实现类,即对 ...

  7. http文件服务器上传与下载功能

    https://www.cnblogs.com/liferecord/p/4843615.html

  8. C# ClickOnce发布方式

    首先编写ClickOnce更新事件, private void button1_Click(object sender, EventArgs e) { if (ApplicationDeploymen ...

  9. 基于steam的游戏销量预测 — PART 3 — 基于BP神经网络的机器学习与预测

    语言:c++ 环境:windows 训练内容:根据从steam中爬取的数据经过文本分析制作的向量以及标签 使用相关:无 解释: 就是一个BP神经网络,借鉴参考了一些博客的解释和代码,具体哪些忘了,给出 ...

  10. Codeforces Round #583 (Div. 1 + Div. 2, based on Olympiad of Metropolises) A题

    A. Optimal Currency ExchangeAndrew was very excited to participate in Olympiad of Metropolises. Days ...