05-06 Flutter JSON和序列化反序列化、创建模型类转换Json数据、轮播图数据渲染:Flutter创建商品数据模型 、请求Api接口渲染热门商品 推荐商品
Config.dart
- class Config{
- static String domain='http://jd.itying.com/';
- }
FocusModel.dart
- class FocusModel {
- List<FocusItemModel> result;
- FocusModel({this.result});
- FocusModel.fromJson(Map<String, dynamic> json) {
- if (json['result'] != null) {
- result = new List<FocusItemModel>();
- json['result'].forEach((v) {
- result.add(new FocusItemModel.fromJson(v));
- });
- }
- }
- Map<String, dynamic> toJson() {
- final Map<String, dynamic> data = new Map<String, dynamic>();
- if (this.result != null) {
- data['result'] = this.result.map((v) => v.toJson()).toList();
- }
- return data;
- }
- }
- class FocusItemModel {
- String sId;
- String title;
- String status;
- String pic;
- String url;
- FocusItemModel({this.sId, this.title, this.status, this.pic, this.url});
- FocusItemModel.fromJson(Map<String, dynamic> json) {
- sId = json['_id'];
- title = json['title'];
- status = json['status'];
- pic = json['pic'];
- url = json['url'];
- }
- Map<String, dynamic> toJson() {
- final Map<String, dynamic> data = new Map<String, dynamic>();
- data['_id'] = this.sId;
- data['title'] = this.title;
- data['status'] = this.status;
- data['pic'] = this.pic;
- data['url'] = this.url;
- return data;
- }
- }
ProductModel.dart
- class ProductModel {
- List<ProductItemModel> result;
- ProductModel({this.result});
- ProductModel.fromJson(Map<String, dynamic> json) {
- if (json['result'] != null) {
- result = new List<ProductItemModel>();
- json['result'].forEach((v) {
- result.add(new ProductItemModel.fromJson(v));
- });
- }
- }
- Map<String, dynamic> toJson() {
- final Map<String, dynamic> data = new Map<String, dynamic>();
- if (this.result != null) {
- data['result'] = this.result.map((v) => v.toJson()).toList();
- }
- return data;
- }
- }
- class ProductItemModel {
- String sId;
- String title;
- String cid;
- Object price;
- String oldPrice;
- String pic;
- String sPic;
- ProductItemModel(
- {this.sId,
- this.title,
- this.cid,
- this.price,
- this.oldPrice,
- this.pic,
- this.sPic});
- ProductItemModel.fromJson(Map<String, dynamic> json) {
- sId = json['_id'];
- title = json['title'];
- cid = json['cid'];
- price = json['price'];
- oldPrice = json['old_price'];
- pic = json['pic'];
- sPic = json['s_pic'];
- }
- Map<String, dynamic> toJson() {
- final Map<String, dynamic> data = new Map<String, dynamic>();
- data['_id'] = this.sId;
- data['title'] = this.title;
- data['cid'] = this.cid;
- data['price'] = this.price;
- data['old_price'] = this.oldPrice;
- data['pic'] = this.pic;
- data['s_pic'] = this.sPic;
- return data;
- }
- }
Home.dart
- import 'package:flutter/material.dart';
- import 'package:flutter_swiper/flutter_swiper.dart';
- import '../../services/ScreenAdaper.dart';
- // import 'dart:convert';
- import '../../config/Config.dart';
- import 'package:dio/dio.dart';
- //轮播图类模型:
- import '../../model/FocusModel.dart';
- //热门推荐:
- import '../../model/ProductModel.dart';
- class HomePage extends StatefulWidget {
- HomePage({Key key}) : super(key: key);
- _HomePageState createState() => _HomePageState();
- }
- class _HomePageState extends State<HomePage> {
- //轮播图:
- //flutter run -d all 链接多个设备的命令:
- List _focusData = [];
- List _hotProductList = [];
- List _bestProductList = [];
- void initState() {
- super.initState();
- _getFocusData();
- _getHotProductData();
- _getBestProductData();
- }
- //获取轮播图数据:
- _getFocusData() async {
- var api = '${Config.domain}/api/focus';
- var result = await Dio().get(api);
- var focusList = FocusModel.fromJson(result.data);
- focusList.result.forEach((value) {
- print(value.title);
- print(value.pic);
- });
- setState(() {
- this._focusData = focusList.result;
- });
- }
- //获取猜你喜欢的数据:
- _getHotProductData() async {
- var api = '${Config.domain}api/plist?is_hot=1';
- var result = await Dio().get(api);
- var hotProductList = ProductModel.fromJson(result.data);
- setState(() {
- this._hotProductList = hotProductList.result;
- });
- }
- //获取热门推荐的数据:
- _getBestProductData() async {
- var api = '${Config.domain}api/plist?is_best=1';
- var result = await Dio().get(api);
- var bestProductList = ProductModel.fromJson(result.data);
- setState(() {
- this._bestProductList = bestProductList.result;
- });
- }
- Widget _swiperWidget() {
- // List<Map> imgList = [
- // {"url": "https://www.itying.com/images/flutter/slide01.jpg"},
- // {"url": "https://www.itying.com/images/flutter/slide02.jpg"},
- // {"url": "https://www.itying.com/images/flutter/slide03.jpg"}
- // ];
- if (this._focusData.length > ) {
- return Container(
- child: AspectRatio(
- aspectRatio: / ,
- child: Swiper(
- itemBuilder: (BuildContext context, int index) {
- String pic = this._focusData[index].pic;
- pic = Config.domain + pic.replaceAll('\\', '/');
- return new Image.network(
- "${pic}",
- fit: BoxFit.fill,
- );
- },
- itemCount: this._focusData.length,
- pagination: new SwiperPagination(),
- control: new SwiperControl(),
- autoplay: true,
- ),
- ),
- );
- } else {
- return Text('加载中~');
- }
- }
- //标题:
- Widget _titleWidget(value) {
- return Container(
- height: ScreenAdaper.height(),
- margin: EdgeInsets.only(left: ScreenAdaper.width()),
- padding: EdgeInsets.only(left: ScreenAdaper.width()),
- decoration: BoxDecoration(
- border: Border(
- left: BorderSide(
- color: Colors.red, width: ScreenAdaper.width()))),
- child: Text(value, style: TextStyle(color: Colors.black54)),
- );
- }
- //热门商品:
- Widget _hotProductListWidget() {
- if (this._hotProductList.length > ) {
- return Container(
- height: ScreenAdaper.height(),
- padding: EdgeInsets.all(ScreenAdaper.width()),
- // width: double.infinity, //寬度自適應
- child: ListView.builder(
- scrollDirection: Axis.horizontal,
- itemBuilder: (contxt, index) {
- String sPic = this._hotProductList[index].sPic;
- sPic = Config.domain + sPic.replaceAll('\\', '/');
- return Column(
- children: <Widget>[
- Container(
- height: ScreenAdaper.height(),
- width: ScreenAdaper.width(),
- margin: EdgeInsets.only(right: ScreenAdaper.width()),
- child: Image.network("${sPic}", fit: BoxFit.cover),
- ),
- Container(
- padding: EdgeInsets.only(top: ScreenAdaper.height()),
- height: ScreenAdaper.height(),
- child: Text(
- '${this._hotProductList[index].price}',
- style: TextStyle(color: Colors.red),
- ),
- )
- ],
- );
- },
- itemCount: this._hotProductList.length,
- ),
- );
- } else {
- return Text('暂无热门推荐数据');
- }
- }
- Widget _recProductListWidget() {
- var itemWidth = (ScreenAdaper.getScreenWidth() - ) / ;
- return Container(
- padding: EdgeInsets.all(),
- child: Wrap(
- runSpacing: ,
- spacing: ,
- children: this._bestProductList.map((value) {
- //图片:
- var sPic = value.sPic;
- sPic = Config.domain + sPic.replaceAll('\\', '/');
- return Container(
- padding: EdgeInsets.all(ScreenAdaper.width()),
- width: itemWidth,
- decoration: BoxDecoration(
- border: Border.all(color: Colors.black12, width: )),
- child: Column(
- children: <Widget>[
- Container(
- width: double.infinity,
- child: AspectRatio(
- aspectRatio: / ,
- child: Image.network("${sPic}", fit: BoxFit.cover),
- ),
- ),
- Padding(
- padding: EdgeInsets.only(top: ScreenAdaper.height()),
- child: Text(
- "${value.title}",
- maxLines: ,
- overflow: TextOverflow.ellipsis,
- style: TextStyle(color: Colors.black54),
- ),
- ),
- Padding(
- padding: EdgeInsets.only(top: ScreenAdaper.height()),
- child: Stack(
- children: <Widget>[
- Align(
- alignment: Alignment.centerLeft,
- child: Text(
- "${value.price}",
- style: TextStyle(color: Colors.red, fontSize: ),
- ),
- ),
- Align(
- alignment: Alignment.centerRight,
- child: Text(
- "¥${value.oldPrice}",
- style: TextStyle(
- color: Colors.black54,
- fontSize: ,
- decoration: TextDecoration.lineThrough),
- ),
- )
- ],
- ),
- )
- ],
- ),
- );
- }).toList(),
- ),
- );
- }
- @override
- Widget build(BuildContext context) {
- ScreenAdaper.init(context);
- return ListView(
- children: <Widget>[
- _swiperWidget(),
- SizedBox(height: ScreenAdaper.height()),
- _titleWidget("猜你喜欢"),
- _hotProductListWidget(),
- SizedBox(height: ScreenAdaper.height()),
- _titleWidget("热门推荐"),
- _recProductListWidget()
- ],
- );
- }
- }
增加依赖:
05-06 Flutter JSON和序列化反序列化、创建模型类转换Json数据、轮播图数据渲染:Flutter创建商品数据模型 、请求Api接口渲染热门商品 推荐商品的更多相关文章
- Flutter学习五之网络请求和轮播图的实现
上期讲到了,怎样实现一个下拉刷新和加载更多的列表,数据更新,需要使用到网络请求,在flutter中,怎样实现一个网络请求呢?官方使用的是dart io中的HttpClient发起的请求,但HttpCl ...
- iOS回顾笔记(05) -- 手把手教你封装一个广告轮播图框架
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- 利用 C# dynamic 减少创建模型类
C# 的 dynamic 关键字可以是C#可以像 javascript 这种弱类型语言一样具有随时可以添加属性的能力.C# 是一种强类型语言,dynamic 要摆脱类型的限制,自然是有代价的.这里不讨 ...
- Flutter轮播图
前端开发当中最有意思的就是实现动画特效,Flutter提供的各种动画组件可以方便实现各种动画效果.Flutter中的动画组件主要分为两类: 隐式动画控件:只需设置组件开始值,结束值,执行时间,比如An ...
- 7、Flutter banner_view 轮播图的使用
1.前言 实现轮播图,效果如下: 2.实现 将采用 banner_view 实现:资源库地址 2.1.yaml 引入依赖 在 pubspec.yaml 声明需要引用的库,执行命令 flutter pa ...
- 28 Flutter 轮播图 flutter_swiper
中文地址: https://github.com/best-flutter/flutter_swiper/blob/master/README-ZH.md 基本参数 参数 默认值 描述 scrollD ...
- day94:flask:Jinjia2模板引擎&flask中的CSRF攻击&Flask-SQLAlchemy的创建模型类和基本的增删改查
目录 1.Jinjia2模板引擎 1.Jinjia2加载模板并传递数据到模板中 2.Jinjia2的模板语句 3.模板中特有的变量和函数 4.模板中内置的过滤器 5.自定义过滤器 6.模板继承 2.在 ...
- JSON实现序列化dump和dumps方法,JSON实现反序列化loads和load方法
通过文件操作,我们可以将字符串写入到一个本地文件.但是,如果是一个对象(例如列表.字典.元组等),就无 法直接写入到一个文件里,需要对这个对象进行序列化,然后才能写入到文件里. 设计一套协议,按照某种 ...
- 二进制数据的序列化反序列化和Json的序列化反序列化的重要区别
前言:最近一个一个很奇怪的问题,很明白的说,就是没看懂,参照下面的代码: /// <summary> /// 反序列化对象 /// </summary> /// <typ ...
随机推荐
- Python(phone)模块获取手机号归属地、区号、运营商等
Python(phone)模块获取手机号归属地.区号.运营商等 一.我使用的是python3,可以自行搜索下载 二.安装phone模块, pip install phone 三.测试代码如下: fro ...
- 中国大学MOOC课程信息之数据分析可视化一
版权声明:本文为博主原创文章,转载 请注明出处:https://blog.csdn.net/sc2079/article/details/82263391 9月2日更:中国大学MOOC课程信息之数据分 ...
- KubeEdge v0.2发布,全球首个K8S原生的边缘计算平台开放云端代码
KubeEdge开源背景 KubeEdge在18年11月24日的上海KubeCon上宣布开源,技术圈曾掀起一阵讨论边缘计算的风潮,从此翻开了边缘计算和云计算联动的新篇章. KubeEdge即Kube+ ...
- PHP 调用 exec 执行中文命令的坑
服务器系统Linux通过php exec 执行rar x 解压命令 保持目录结构,压缩包内英文目录正常解压中文目录解压失败,请问有什么办法可以解决直接在终端命令进行解压是没有问题的 最终解决办法 $s ...
- Redis单实例数据迁移到集群
环境说明 单机redis redis集群 192.168.41.101:7000 master 192.168.41.101:7001 master 192.168.41.102:7000 maste ...
- Controllers返回View的一个完整流程
详细说明一个MVC框架下,返回一个view的原理.如下图: 上图粗略的说明了一个返回View的流程,细节如下: 1.定义Model类: 2.定义接口添加接口约束为class: 3.定义接口实现类,即对 ...
- http文件服务器上传与下载功能
https://www.cnblogs.com/liferecord/p/4843615.html
- C# ClickOnce发布方式
首先编写ClickOnce更新事件, private void button1_Click(object sender, EventArgs e) { if (ApplicationDeploymen ...
- 基于steam的游戏销量预测 — PART 3 — 基于BP神经网络的机器学习与预测
语言:c++ 环境:windows 训练内容:根据从steam中爬取的数据经过文本分析制作的向量以及标签 使用相关:无 解释: 就是一个BP神经网络,借鉴参考了一些博客的解释和代码,具体哪些忘了,给出 ...
- 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 ...