58.购物车_删除商品功能制作
主要做购物车后面的删除按钮
删除的方法写在provide里面
provide/cart.dart文件
传入goodsId，循环对比，找到后进行移除
//删除单个购物车商品
deleteOneGoods(String goodsId) async{
SharedPreferences prefs=await SharedPreferences.getInstance();
cartString=prefs.getString('cartInfo');
List<Map> tempList=(json.decode(cartString.toString()) as List).cast();
int tempIndex=;//定义循环的索引
int deleteIndex=;//要删除的索引
tempList.forEach((item){
if(item['goodsId']==goodsId){
deleteIndex=tempIndex;
}
tempIndex++;
});
tempList.removeAt(deleteIndex);//删除
//删除后转换成string进行持久化
cartString=json.encode(tempList.toString());//list转字符串
prefs.setString('cartInfo', cartString);
await getCartInfo();//重新获取下列表数据，因为getCartInfo方法里面有通知，这里就不再调用了
}
ui内增加删除的事件
cart_page.dart文件内，我们需要在ListView的外层套一层Provide组件
这样我们购物车的数据就是动态的了
删除的事件-cart_item.dart
先引入cartProvide和provide
传入上下文context，和item当前这个商品对象
运行程序查看效果
修正一个错误的地方，应该是先encode再去toString()
最终代码
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,//传入进来的值
'goodsName':goodsName,
'count':count,
'price':price,
'images':images,
'isCheck':true
};
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');//持久化中获得字符串
print('购物车持久化的数据================>'+cartString);
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();//通知
} //删除单个购物车商品
deleteOneGoods(String goodsId) async{
SharedPreferences prefs=await SharedPreferences.getInstance();
cartString=prefs.getString('cartInfo');
List<Map> tempList=(json.decode(cartString.toString()) as List).cast();
int tempIndex=;//定义循环的索引
int deleteIndex=;//要删除的索引
tempList.forEach((item){
if(item['goodsId']==goodsId){
deleteIndex=tempIndex;
}
tempIndex++;
});
tempList.removeAt(deleteIndex);//删除
//删除后转换成string进行持久化
cartString=json.encode(tempList).toString();//list转字符串
prefs.setString('cartInfo', cartString);
await getCartInfo();//重新获取下列表数据，因为getCartInfo方法里面有通知，这里就不再调用了
} }
cart_page.dart：列表外层嵌套provide，数据从provide内获取
import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import 'package:flutter_shop/provide/cart.dart';
import 'cart_page/cart_item.dart';
import 'cart_page/cart_bottom.dart'; class CartPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('购物车'),
),
body: FutureBuilder(
future: _getCartInfo(context),
builder: (context,snapshot){
if(snapshot.hasData){ List cartList=Provide.value<CartProvide>(context).cartList;
//return Text('有数据啊'+cartList.length.toString());
return Stack(
children: <Widget>[
Provide<CartProvide>(
builder: (contex,child,childCategory){
cartList=Provide.value<CartProvide>(context).cartList;
return ListView.builder(
itemCount: cartList.length,
itemBuilder: (context,index){
return CartItem(cartList[index]);
},
);
},
), Positioned(
bottom: ,
left: ,
child: CartBottom(),
)
],
); }else{
return Text('正在加载');
}
},
),
);
} Future<String> _getCartInfo(BuildContext context) async{
await Provide.value<CartProvide>(context).getCartInfo();
//print('=========================获取购物车内数据');
return 'end';
} }
cart_item.dart:主要增加删除的事件
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../model/cartInfo.dart';
import './cart_count.dart';
import 'package:provide/provide.dart';
import '../../provide/cart.dart'; class CartItem extends StatelessWidget {
final CartInfoModel item;
CartItem(this.item); @override
Widget build(BuildContext context) {
//print(item);
return Container(
margin: EdgeInsets.fromLTRB(5.0, 2.0, 5.0, 2.0),
padding: EdgeInsets.fromLTRB(5.0, 10.0, 5.0, 10.0),
decoration: BoxDecoration(
color: Colors.white,
border: Border(
bottom: BorderSide(width: ,color: Colors.black12)
)
),
child: Row(
children: <Widget>[
_cartCheckBt(context,item),
_cartImage(),
_cartGoodsName(),
_cartPrice(context,item)
],
),
);
}
//复选框
Widget _cartCheckBt(context,item){
return Container(
child: Checkbox(
value: item.isCheck,//这里的值变成动态的
activeColor: Colors.pink,//激活颜色设置为粉色
onChanged:(bool val){ }
),
);
}
//商品图片
Widget _cartImage(){
return Container(
width: ScreenUtil().setWidth(),
padding: EdgeInsets.all(3.0),//内边距
decoration: BoxDecoration(
border: Border.all(width:1.0,color: Colors.black12)
),
child: Image.network(item.images),//item声明好了 所以不用传递
);
} //商品名称
Widget _cartGoodsName() {
return Container(
width: ScreenUtil().setWidth(),
padding: EdgeInsets.all(),
alignment: Alignment.topLeft,//顶端左对齐
child: Column(
children: <Widget>[
Text(item.goodsName),
CartCount()
],
),
);
} //商品价格
Widget _cartPrice(context,item) {
return Container(
width: ScreenUtil().setWidth(),//只要合起来不超过750 就不会溢出
alignment: Alignment.centerRight,//居中靠右
child: Column(
children: <Widget>[
Text('￥${item.price}'),
Container(//用来放icon删除按钮
child: InkWell(
onTap: (){
Provide.value<CartProvide>(context).deleteOneGoods(item.goodsId);
},
child: Icon(
Icons.delete_forever,
color: Colors.black26,//浅灰色
size: ,
),
),
)
],
),
);
} }