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修改的更多相关文章

  1. Flutter实战视频-移动电商-53.购物车_商品列表UI框架布局

    53.购物车_商品列表UI框架布局 cart_page.dart 清空原来写的持久化的代码; 添加对应的引用,stless生成一个静态的类.建议始终静态的类,防止重复渲染 纠正个错误,上图的CartP ...

  2. Flutter实战视频-移动电商-54.购物车_商品列表子项布局

    54.购物车_商品列表子项布局 子项做成一个单独的页面 新建cartItem.dart文件 新建cart_page文件夹,在里面新建cart_item.dart页面, 页面名字叫做CartItem 定 ...

  3. Flutter实战视频-移动电商-55.购物车_底部结算栏UI制作

    55.购物车_底部结算栏UI制作 主要做下面结算这一栏目 cart_bottom.dart页面 先设置下内边距 拆分成三个子元素 全选 因为有一个文本框和一个全选的text文本,所以这里也用了Row布 ...

  4. Flutter实战视频-移动电商-56.购物车_商品数量控制区域制作

    56.购物车_商品数量控制区域制作 主要做购物车中的数量这里 cart_page文件夹下新建cart_count.dart 减少按钮 因为会有点击事件,所以这里我们使用InkWell. child里面 ...

  5. Flutter实战视频-移动电商-57.购物车_在Model中增加选中字段

    57.购物车_在Model中增加选中字段 先修改model类 model/cartInfo.dart类增加是否选中的属性 修改provide 修改UI部分pages/cart_page/cart_it ...

  6. Flutter实战视频-移动电商-58.购物车_删除商品功能制作

    58.购物车_删除商品功能制作 主要做购物车后面的删除按钮 删除的方法写在provide里面 provide/cart.dart文件 传入goodsId,循环对比,找到后进行移除 //删除单个购物车商 ...

  7. Flutter实战视频-移动电商-59.购物车_计算商品价格和数量

    59.购物车_计算商品价格和数量 本节课主要是加上自动计算的功能 provide/cart.dart 在provide的类里面增加两个变量 cart_bottom.dart 三个组件因为我们都需要套一 ...

  8. Flutter实战视频-移动电商-60.购物车_全选按钮的交互效果制作

    60.购物车_全选按钮的交互效果制作 主要做全选和复选框的这两个功能 provide/cart.dart 业务逻辑写到provide里面 先持久化取出来字符串,把字符串编程list.循环list ca ...

  9. Flutter实战视频-移动电商-61.购物车_商品数量的加减操作

    61.购物车_商品数量的加减操作 provide/cart.dart pages/cart_page/cart_count.dart 先引入provide和cartProvide 定义接收一个item ...

随机推荐

  1. sublime 汇总

    此文内容有原创,还有各种其他博客抄来的经验,技巧,纯属个人使用心得. http://www.cnblogs.com/figure9/p/sublime-text-complete-guide.html ...

  2. 在Linux中将php-fpm配置成服务的方法

    1.配置php-fpm.conf vi /usr/local/php/etc/php-fpm.conf php-fpm.pid 目录必须指向:/usr/local/php/var/run/php-fp ...

  3. hdu5318 The Goddess Of The Moon (矩阵高速幂优化dp)

    题目:pid=5318">http://acm.hdu.edu.cn/showproblem.php?pid=5318 题意:给定n个数字串和整数m,规定若数字串s1的后缀和数字串s2 ...

  4. App性能优化浅谈

    前言 前段时间给公司的小伙伴们进行了关于app性能优化的技术分享.这里我稍微整理一下也给大家分享一下.关于性能优化这个话题非常大,涉及面能够非常广,也能够非常深入.本人能力有限,不会给大家讲特别难懂, ...

  5. Hadoop集群_Hadoop安装配置

    1.集群部署介绍 1.1 Hadoop简介 Hadoop是Apache软件基金会旗下的一个开源分布式计算平台.以Hadoop分布式文件系统(HDFS,Hadoop Distributed Filesy ...

  6. commons io上传文件

    习惯了是用框架后,上传功能MVC框架基本都提供了.如struts2,springmvc! 可是假设项目中没有使用框架.而是单纯的使用jsp或servlet作为action,这时我们就能够使用commo ...

  7. Java基础知识查漏 一

    Java基础知识查漏 一 Jdk和jre Jdk是java程序设计师的开发工具,只要包含编译程序,jvm和java函数库 Jre中只有jvm和java函数库,没有编译程序的相关工具,适合只运行不撰写j ...

  8. 怎么实现单击span时给span添加边框

    说明: 1.开发环境 vs2012 asp.net mvc4 c# 1.效果图 2.html 前端代码 <%@ Page Language="C#" AutoEventWir ...

  9. go echo studygolang ___go_build_myT_go__1_.exe

    https://github.com/studygolang/studygolang [stat]; 用户在线数据存到哪里:redis -> 表示存入 redis,这样支持多机部署; onlin ...

  10. MongoDB 数据库、集合创建删除与文档插入

    本文章主要介绍mongodb的基本命令,前提条件,你的本地已经安装了mongo. 一.基本命令使用(主要是创建,增删改.) 0.mongoDb统计信息 获得关于MongoDB的服务器统计,需要在Mon ...