61.购物车_商品数量的加减操作
provide/cart.dart
pages/cart_page/cart_count.dart
先引入provide和cartProvide
定义接收一个item对象的参数
把加减的方法都加上下文对象
添加和减少的点击事件
中间数字的数量的设置
cart_item.dart
cart_item在调用CartCount的时候需要传入上篇的单个对象
效果演示：
修正一个地方provide/cart.dart
这里toString是放在外面的
最终代码：
provide/cart.dart
//商品数量加减
addOrReduceAction(var cartItem,String todo) async{
SharedPreferences prefs=await SharedPreferences.getInstance();
cartString=prefs.getString('cartInfo');
List<Map> tempList=(json.decode(cartString.toString()) as List).cast();
int tempIndex=;//循环的索引
int changeIndex=;//要改变的索引
tempList.forEach((item){
if(item['goodsId']==cartItem.goodsId){
changeIndex=tempIndex;
}
tempIndex++;
});
if(todo=='add'){
cartItem.count++;
}else if(cartItem.count>){
cartItem.count--;//数量只有大于1才能减减
} tempList[changeIndex]=cartItem.toJson();
cartString=json.encode(tempList).toString();
prefs.setString('cartInfo', cartString); await getCartInfo();//重新获取购物车数据
}
dart_page/cart_count.dart
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provide/provide.dart';
import '../../provide/cart.dart'; class CartCount extends StatelessWidget {
var item;
CartCount(this.item);//接收一个item参数 @override
Widget build(BuildContext context) {
return Container(
width: ScreenUtil().setWidth(),
margin: EdgeInsets.only(top:5.0),
decoration: BoxDecoration(
border: Border.all(width: ,color: Colors.black12)//设置所有的边框宽度为1 颜色为浅灰
),
child: Row(
children: <Widget>[
_reduceBtn(context),
_countArea(),
_addBtn(context)
],
),
);
}
//减少按钮
Widget _reduceBtn(context){
return InkWell(
onTap: (){
Provide.value<CartProvide>(context).addOrReduceAction(item, 'reduce');
},
child: Container(
width: ScreenUtil().setWidth(),//是正方形的所以宽和高都是45
height: ScreenUtil().setHeight(),
alignment: Alignment.center,//上下左右都居中
decoration: BoxDecoration(
color:item.count> ? Colors.white:Colors.black12,//按钮颜色大于1是白色，小于1是灰色
border: Border(//外层已经有边框了所以这里只设置右边的边框
right:BorderSide(width: 1.0,color: Colors.black12)
)
),
child:item.count> ? Text('-') : Text(' '),//数量小于1 什么都不显示
),
);
}
//加号
Widget _addBtn(context){
return InkWell(
onTap: (){
Provide.value<CartProvide>(context).addOrReduceAction(item, 'add');
},
child: Container(
width: ScreenUtil().setWidth(),//是正方形的所以宽和高都是45
height: ScreenUtil().setHeight(),
alignment: Alignment.center,//上下左右都居中
decoration: BoxDecoration(
color: Colors.white,
border: Border(//外层已经有边框了所以这里只设置右边的边框
left:BorderSide(width: 1.0,color: Colors.black12)
)
),
child: Text('+'),
),
);
} //中间数量显示区域
Widget _countArea(){
return Container(
width: ScreenUtil().setWidth(),//爬两个数字的这里显示不下就宽一点70
height: ScreenUtil().setHeight(),//高度和加减号保持一样的高度
alignment: Alignment.center,//上下左右居中
color: Colors.white,//北京颜色 设置为白色
child: Text('${item.count}'),//先默认设置为1 因为后续是动态的获取数字
);
} }