Flutter移动电商实战 --(52)购物车_数据模型建立和Provide修改
根据json数据生成模型类
{"goodsId":"2171c20d77c340729d5d7ebc2039c08d","goodsName":"五粮液52°500ml","count":1,"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=0;//foreach循环的索引
//循环判断列表是否存在该goodsId的商品,如果有就数量+1
tempList.forEach((item){
if(item['goodsId']==goodsId){
tempList[ival]['count']=item['count']+1;
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();//通知
}
}
.
Flutter移动电商实战 --(52)购物车_数据模型建立和Provide修改的更多相关文章
- Flutter实战视频-移动电商-52.购物车_数据模型建立和Provide修改
		
52.购物车_数据模型建立和Provide修改 根据json数据生成模型类 {,"price":830.0,"images":"http://imag ...
 - Flutter移动电商实战 --(53)购物车_商品列表UI框架布局
		
cart_page.dart 清空原来写的持久化的代码; 添加对应的引用,stless生成一个静态的类.建议始终静态的类,防止重复渲染 纠正个错误,上图的CartPage单词拼错了,这里改过来防止后面 ...
 - Flutter移动电商实战 --(51)购物车_Provide中添加商品
		
新加provide的cart.dart页面 引入三个文件.开始写provide类.provide需要用with 进行混入 从prefs里面获取到数据,判断有没有数据,如果有数据就返转正List< ...
 - Flutter移动电商实战 --(48)详细页_详情和评论的切换
		
增加切换的效果,我们主要是修改这个地方 这样我们的评论的内容就显示出来了 最终代码 details_web.dart import 'package:flutter/material.dart'; i ...
 - Flutter移动电商实战 --(46)详细页_自定义TabBar Widget
		
主要实现详情和评论的tab provide定义变量 自己做一个tab然后用provide去控制 定义两个变量来判断是左侧选中了还是右侧选中了.并定义一个方法来接受参数,修改是左侧还是右侧选中的状态值 ...
 - Flutter移动电商实战 --(45)详细页_说明区域UI编写
		
pages/details_page/details_expain.dart 详情页面引用组件 效果展示: 最终代码: import 'package:flutter/material.dart'; ...
 - Flutter移动电商实战 --(44)详细页_首屏自定义Widget编写
		
把详细页的图片.标题.编号和价格形成一个单独的widget去引用 详情页的顶部单独封装个插件 在pages下面新建detials_page的文件件并在里面新建页面details_top_area.da ...
 - Flutter移动电商实战 --(43)详细页_补充首页跳转到详细页
		
首页轮播点击到详细页 修改我们轮播这里的代码:SwiperDiy这个类这里的代码 return InkWell( onTap: (){ Application.router.navigateTo(co ...
 - Flutter移动电商实战 --(35)列表页_上拉加载更多制作
		
右侧列表上拉加载配合类别的切换 上拉加载需要一个page参数,当点击大类或者小类的时候,这个page就要变成1 provide内定义参数 首先我们需要定义一个page的变量 下图是我们之前在首页的时候 ...
 
随机推荐
- ESLint——从零学起
			
介绍 ESLint最初是由Nicholas C. Zakas于2013年6月创建的开源项目.它的目标是提供一个插件化的javascript代码检测工具.因此,ESLint就是一个语法规则和代码风格的检 ...
 - kubernetes  应用快速入门
			
使用kubectl进行增.删.查.改等常用操作 查看kubectl命令帮助 kubectl -h kubectl controls the Kubernetes cluster manager. Fi ...
 - git命令——git add
			
如何理解git add git add命令本身并不复杂,字面意义上理解是“将一个文件添加到项目中“.但是这种理解有缺陷,有时候可能会出现某个文件同时存在暂存区域 和 非暂存区域(staged and ...
 - HTML手写课程表,练基础
			
<html> <head> <title>表格table元素综合练习--课程表</title> </head> <body> & ...
 - Pytohn笔记(31)----第三方包
			
摘自: https://www.jianshu.com/p/bbc8672a2d09 一. from __future__ import **** [版本更新之后想在原来的版本使用新版本的一些功能] ...
 - c++面向对象模型---c++如何管理类,对象以及它们之间的联系
			
首先我们随意定义4个类结构 class cl1 { private: int age; string name; static int addr; public: cl1() { } void iwa ...
 - 题解 [51nod1225]余数之和
			
题解 [51nod1225]余数之和 题面 解析 首先可以发现,\(a\)%\(b\)\(=a-b*\lfloor a/b \rfloor\). 而对于一段连续的\(b\)来说\(\lfloor a/ ...
 - php常量和变量之变量引用
			
变量引用 变量引用很多老师喜欢来用C语言的指针来去讲解.我们作为有这么多年开发和教学经验的人来说——大多数学习PHP的人来说根本不了解C语言. 使用C语言一指针来讲解变量引用,我们觉得画蛇填足.并且, ...
 - linux中的set ff=unix
			
set ff=unix : 告诉 vi 编辑器,使用unix换行符. 操作步骤: 1.用vi命令打开文件 2.直接输入 :set ff=unix
 - REST与RPC区别
			
OSI网络七层模型 第一层:应用层.定义了用于在网络中进行通信和传输数据的接口: 第二层:表示层.定义不同的系统中数据的传输格式,编码和解码规范等: 第三层:会话层.管理用户的会话,控制用户间逻辑连接 ...