Flutter实战视频-移动电商-51.购物车_Provide中添加商品
51.购物车_Provide中添加商品
新加provide的cart.dart页面
引入三个文件。开始写provide类。provide需要用with 进行混入
从prefs里面获取到数据,判断有没有数据,如果有数据就返转正List<Map>
判断是否有重复的记录,如果有重复记录就数量+1,如果数据不存在就加入到tempList数组中,最后把tempList数据转成字符串,进行持久化
清空购物车的方法
清空的方法比较简单,注意这里是异步的
给两个方法最后都加上通知
provide的全局依赖
在main.dart中
details_bottom.dart中
引入,
因为要获取商品的信息,所以要引入:details_info.dart
import 'package:provide/provide.dart';
import '../../provide/cart.dart';
import '../../provide/details_info.dart';
从provide中获取到当前商品的详情,就可以获取到商品的编号 名称 价格和图片的地址了。
加入购物车和清空购物车的点击事件内,调用provide内的save和remove的方法
纠正错误:
效果展示:
添加重复的数量在增加
立即购买是清空的效果
最终代码
provide/cart.dart
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'dart:convert'; class CartProvide with ChangeNotifier{
String cartString="[]";//声明一个变量 做持久化的存储 //声明一个异步的方法,购物车操作放在前台不在请求后台的数据
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']+;
isHave=true;
}
ival++;
});
//没有不存在这个商品,就把商品的json数据加入的tempList中
if(!isHave){
tempList.add({
'goodsId':goodsId,//传入进来的值
'goodsNmae':goodsName,
'count':count,
'price':price,
'images':images
});
}
cartString=json.encode(tempList).toString();//json数据转字符串
print(cartString);
prefs.setString('cartInfo', cartString);
notifyListeners();
}
remove() async{
SharedPreferences prefs=await SharedPreferences.getInstance();
prefs.remove('cartInfo');
print('清空完成----------------------');
notifyListeners();
}
}
import 'package:flutter/material.dart';
import './pages/index_page.dart';
import 'package:provide/provide.dart';
import './provide/counter.dart';
import './provide/child_category.dart';
import './provide/category_goods_list.dart';
import './provide/details_info.dart';
import './provide/cart.dart';
import 'package:fluro/fluro.dart';
import './routers/routers.dart';
import './routers/application.dart'; void main(){
var counter=Counter();
var childCategory=ChildCategory();
var categoryGoodsListProvide=CategoryGoodsListProvide();
var detailsInfoProvide=DetailsInfoProvide();
var cartProvide=CartProvide();
var providers=Providers();
//final router=Router();//Router就是我们的Fluro
//注册 依赖
providers
..provide(Provider<Counter>.value(counter))
..provide(Provider<CategoryGoodsListProvide>.value(categoryGoodsListProvide))
..provide(Provider<DetailsInfoProvide>.value(detailsInfoProvide))
..provide(Provider<CartProvide>.value(cartProvide))
..provide(Provider<ChildCategory>.value(childCategory));
runApp(ProviderNode(child: MyApp(),providers: providers,));
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) { final router=Router();//Router就是我们的Fluro
Routes.configurreRoutes(router);//注册router
Application.router=router;//静态化 return Container(
child:MaterialApp(
title:'百姓生活+',
onGenerateRoute: Application.router.generator,
debugShowCheckedModeBanner: false,
theme: ThemeData(
primaryColor: Colors.pink
),
home: IndexPage(),
)
);
}
}
main.dart
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provide/provide.dart';
import '../../provide/cart.dart';
import '../../provide/details_info.dart'; class DetailsBottom extends StatelessWidget {
@override
Widget build(BuildContext context) {
var goodsInfo=Provide.value<DetailsInfoProvide>(context).goodsInfo.data.goodInfo;//当前商品的详情
var goodsId=goodsInfo.goodsId;
var goodsName=goodsInfo.goodsName;
var count=;//默认为1
var price=goodsInfo.presentPrice;
var images=goodsInfo.image1; return Container(
width: ScreenUtil().setWidth(),
color: Colors.white,
height: ScreenUtil().setHeight(),
child: Row(
children: <Widget>[
InkWell(
onTap: (){},
child: Container(
width: ScreenUtil().setWidth(),
alignment: Alignment.center,
child: Icon(
Icons.shopping_cart,
size:,//图标没有自适应 要是设置size的大小
color: Colors.red,
),
),
),
InkWell(
onTap: () async{
await Provide.value<CartProvide>(context).save(goodsId, goodsName, count, price, images);
},
child: Container(
alignment: Alignment.center,
width: ScreenUtil().setWidth(),//750 - 110 再除以2 评分
height: ScreenUtil().setHeight(),
color: Colors.green,
child: Text(
'加入购物车',
style:TextStyle(color:Colors.white,fontSize: ScreenUtil().setSp()),
),
),
),
InkWell(
onTap: () async{
await Provide.value<CartProvide>(context).remove();
},
child: Container(
alignment: Alignment.center,
width: ScreenUtil().setWidth(),//750 - 110 再除以2 评分
height: ScreenUtil().setHeight(),
color: Colors.red,
child: Text(
'立即购买',
style:TextStyle(color:Colors.white,fontSize: ScreenUtil().setSp()),
),
),
)
],
),
);
}
}
details_bottom.dart
Flutter实战视频-移动电商-51.购物车_Provide中添加商品的更多相关文章
- Flutter实战视频-移动电商-53.购物车_商品列表UI框架布局
53.购物车_商品列表UI框架布局 cart_page.dart 清空原来写的持久化的代码; 添加对应的引用,stless生成一个静态的类.建议始终静态的类,防止重复渲染 纠正个错误,上图的CartP ...
- Flutter实战视频-移动电商-63.购物车_详细页显示购物车商品数量
63.购物车_详细页显示购物车商品数量 购物车的图标嵌套在statck组件里面 外层套了一个stack组件 数量我们需要用Provide 返回一个container来做样式 气泡效果,中间是个数字外面 ...
- Flutter实战视频-移动电商-52.购物车_数据模型建立和Provide修改
52.购物车_数据模型建立和Provide修改 根据json数据生成模型类 {,"price":830.0,"images":"http://imag ...
- 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 三个组件因为我们都需要套一 ...
随机推荐
- CAS 单点登录原理
访问服务: 浏览器发送请求访问应用系统 定向认证: 应用系统重定向用户请求到 SSO 服务器. 用户认证:用户身份认证. 发放票据: 认证通过后,SSO 服务器会产生一个随机的 Service Tic ...
- 提高sqlite 的运行性能(转载)
原文地址: https://blog.devart.com/increasing-sqlite-performance.html One the major issues a developer en ...
- 【计蒜客2017NOIP模拟赛1】
D1T1 题面 题解:一开始以为傻题,旋转个坐标系就行了,结果光荣爆零~ 结果发现旋转坐标系后,由于多了一些虚点,锤子砸到虚点上了~gg [没有代码] D1T2 题面 题解:计算出每个边对答案的贡献即 ...
- c#冒泡法排序
1.通过冒泡法实现一个int数组的有小到大的排序 代码如下: //用for语句来实现排序功能,冒泡排序 static void Sort(int[] number) { ; i < number ...
- svn提交异常file is scheduled for addition, but is missing
svn提交错误file is scheduled for addition, but is missing svn ci -m "" svn: E155010: Commit fa ...
- SpringBoot-(4)-Filter的使用
一,Filter Filter功能,它使用户可以改变一个 request和修改一个response. Filter 不是一个servlet,它不能产生一个response,它能够在一个request到 ...
- cc、gcc、g++区别
gcc是C编译器:g++是C++编译器:linux下cc一般是一个符号连接,指向gcc:gcc和g++都是GUN(组织)的编译器.而CC则一般是makefile里面的一个名字,即宏定义,嘿,因为Lin ...
- 如何缓存hbase数据以减少下次取数据的时间
缓存从hbase取得的数据的好处是显而易见的,缓存到本地以后,如果下次的输入能够直接从已缓存的本地文件中取得数据就无需再次访问hbase数据库,这样一来数据量大的话可以节省大量的访问hbase数据库的 ...
- 使用bat文件打开和关闭本地exe
打开: cd 路径start AA.exe 关闭: taskkill /f /im AA.exe
- linux 中mmap的用法
函数:void *mmap(void *start,size_t length,int prot,int flags,int fd,off_t offsize); 参数start(dst):指向欲映射 ...