Flutter实战视频-移动电商-52.购物车_数据模型建立和Provide修改
52.购物车_数据模型建立和Provide修改
根据json数据生成模型类
{"goodsId":"2171c20d77c340729d5d7ebc2039c08d","goodsName":"五粮液52°500ml","count":,"price":830.0,"images":"http://images.baixingliangfan.cn/shopGoodsImg/20181229/20181229211422_8507.jpg"}
https://javiercbk.github.io/json_to_dart/
model文件夹下新建类cartInfo.dart
类名叫做CartInfoModel。

provide/cart.dart



这样变量在add的时候,直接就可以用上面定义的map的变量了

把我们的cartList打印在控制台。

点击运行报错了

model类的价格改成double类型的


数据模型清空
清空持久化数据的时候,也要把cartList这个新定义的List数据也清空一下。

新增得到购物车数据的方法

最终代码:
model/cartInfo.dart
class CartInfoModel {
String goodsId;
String goodsName;
int count;
double price;
String images;
CartInfoModel(
{this.goodsId, this.goodsName, this.count, this.price, this.images});
CartInfoModel.fromJson(Map<String, dynamic> json) {
goodsId = json['goodsId'];
goodsName = json['goodsName'];
count = json['count'];
price = json['price'];
images = json['images'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['goodsId'] = this.goodsId;
data['goodsName'] = this.goodsName;
data['count'] = this.count;
data['price'] = this.price;
data['images'] = this.images;
return data;
}
}
provide/cart.dart
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'dart:convert';
import '../model/cartInfo.dart'; class CartProvide with ChangeNotifier{
String cartString="[]";//声明一个变量 做持久化的存储
List<CartInfoModel> cartList=[]; //声明一个异步的方法,购物车操作放在前台不在请求后台的数据
save(goodsId,goodsName,count,price,images) async {
SharedPreferences prefs = await SharedPreferences.getInstance();
cartString= prefs.getString('cartInfo');//先从持久化中获取
var temp = cartString==null?[]:json.decode(cartString.toString());
//声明list 强制类型是Map
List<Map> tempList=(temp as List).cast();//把temp转成list
bool isHave=false;//是否已经存在了这条记录
int ival=;//foreach循环的索引
//循环判断列表是否存在该goodsId的商品,如果有就数量+1
tempList.forEach((item){
if(item['goodsId']==goodsId){
tempList[ival]['count']=item['count']+;
cartList[ival].count++;
isHave=true;
}
ival++;
});
//没有不存在这个商品,就把商品的json数据加入的tempList中
if(!isHave){
Map<String,dynamic> newGoods={
'goodsId':goodsId,//传入进来的值
'goodsNmae':goodsName,
'count':count,
'price':price,
'images':images
};
tempList.add(newGoods);
cartList.add(CartInfoModel.fromJson(newGoods));
}
cartString=json.encode(tempList).toString();//json数据转字符串
print('字符串》》》》》》》》》》》${cartString}');
print('字符串》》》》》》》》》》》${cartList}'); prefs.setString('cartInfo', cartString);
notifyListeners();
}
remove() async{
SharedPreferences prefs=await SharedPreferences.getInstance();
prefs.remove('cartInfo');
cartList=[];
print('清空完成----------------------');
notifyListeners();
} getCartInfo() async{
SharedPreferences prefs=await SharedPreferences.getInstance();
cartString=prefs.getString('cartInfo');//持久化中获得字符串
cartList=[];//把最终的结果先设置为空list
if(cartString==null){
cartList=[];//如果持久化内没有数据 那么就还是空的list
}else{
//声明临时的变量
List<Map> tempList=(json.decode(cartString.toString()) as List).cast();
tempList.forEach((item){
cartList.add(CartInfoModel.fromJson(item));//json转成对象,加入到cartList中
}); }
notifyListeners();//通知
} }
cart.dart
Flutter实战视频-移动电商-52.购物车_数据模型建立和Provide修改的更多相关文章
- Flutter实战视频-移动电商-53.购物车_商品列表UI框架布局
53.购物车_商品列表UI框架布局 cart_page.dart 清空原来写的持久化的代码; 添加对应的引用,stless生成一个静态的类.建议始终静态的类,防止重复渲染 纠正个错误,上图的CartP ...
- Flutter实战视频-移动电商-54.购物车_商品列表子项布局
54.购物车_商品列表子项布局 子项做成一个单独的页面 新建cartItem.dart文件 新建cart_page文件夹,在里面新建cart_item.dart页面, 页面名字叫做CartItem 定 ...
- Flutter实战视频-移动电商-55.购物车_底部结算栏UI制作
55.购物车_底部结算栏UI制作 主要做下面结算这一栏目 cart_bottom.dart页面 先设置下内边距 拆分成三个子元素 全选 因为有一个文本框和一个全选的text文本,所以这里也用了Row布 ...
- Flutter实战视频-移动电商-56.购物车_商品数量控制区域制作
56.购物车_商品数量控制区域制作 主要做购物车中的数量这里 cart_page文件夹下新建cart_count.dart 减少按钮 因为会有点击事件,所以这里我们使用InkWell. child里面 ...
- Flutter实战视频-移动电商-57.购物车_在Model中增加选中字段
57.购物车_在Model中增加选中字段 先修改model类 model/cartInfo.dart类增加是否选中的属性 修改provide 修改UI部分pages/cart_page/cart_it ...
- Flutter实战视频-移动电商-58.购物车_删除商品功能制作
58.购物车_删除商品功能制作 主要做购物车后面的删除按钮 删除的方法写在provide里面 provide/cart.dart文件 传入goodsId,循环对比,找到后进行移除 //删除单个购物车商 ...
- Flutter实战视频-移动电商-59.购物车_计算商品价格和数量
59.购物车_计算商品价格和数量 本节课主要是加上自动计算的功能 provide/cart.dart 在provide的类里面增加两个变量 cart_bottom.dart 三个组件因为我们都需要套一 ...
- Flutter实战视频-移动电商-60.购物车_全选按钮的交互效果制作
60.购物车_全选按钮的交互效果制作 主要做全选和复选框的这两个功能 provide/cart.dart 业务逻辑写到provide里面 先持久化取出来字符串,把字符串编程list.循环list ca ...
- Flutter实战视频-移动电商-61.购物车_商品数量的加减操作
61.购物车_商品数量的加减操作 provide/cart.dart pages/cart_page/cart_count.dart 先引入provide和cartProvide 定义接收一个item ...
随机推荐
- Canvas学习笔记——动画中的三角学
示例1,跟随鼠标的键头: 需要掌握一个重要的公式,这个方法返回从 x 轴到点 (x,y) 之间的角度 Math.atan2(dy,dx); 关键代码: function Arrow() { thi ...
- Oracle 索引 简单介绍
1 索引的创建语法: CREATE UNIUQE | BITMAP INDEX <schema>.<index_name> ON <schema>.&l ...
- 使用C#解决部分Win8.1系统窗体每隔几秒失去焦点的问题
使用了Win8.1 With Update 1后,发现重新启动系统后,当前激活的窗体总是每隔几秒失去焦点.过0.5~1秒焦点回来.导致输入无法正常工作,严重影响使用心情和效率. 在网上找了非常久,也没 ...
- 【windows phone】CollectionViewSource的妙用
在windows phone中绑定集合数据的时候,有时候需要分层数据,通常需要以主从试图形式显示.通常的方法是将第二个ListBox(主视图)的数据源绑定到第一个ListBox (从视图)的Selec ...
- 怎样使用在线Webapp生成器生成安装包
在这篇文章中,我们来介绍怎样使用在线(online)的Webapp生成器来生产在Ubuntu手机或模拟器中能够安装的click安装包. Webapp生成器的地址:https://developer.u ...
- Windows8-x64 VMWare安装Linux CentOS6-x64
本文參考了:http://www.cnblogs.com/seesea125/archive/2012/02/25/2368255.html 其内容相当具体,以至于我还没依照其步骤做完.系统就已经安装 ...
- UML类图关系表示方法
本文转载: http://blog.csdn.net/fengsh998/article/details/8105631 分类: UML2012-10-24 10:18 1175人阅读 评论(0) 收 ...
- php 批量删除数据
php 批量删除数据 :比如我们在看邮箱文件的时候,积攒了一段时间以后,看到有些文件没有用了 这时候我们就会想到把这些 没用的文件删除,这时候就用到了批量删除数据的功能,这里我是用了数据库原有的一个表 ...
- Storage Types and Storage Policies
https://hadoop.apache.org/docs/current/hadoop-project-dist/hadoop-hdfs/ArchivalStorage.html Introduc ...
- MongoDB 学习四 : 查询(续)
接着上章,继续介绍MongoDB的查询. Querying on Embedded Documents 有两种方式查询嵌入式的子Documents:查询整个Document或者查询个别的键值对. 查询 ...