先引入provide和cartProvidejson
定義接收一個item對象的參數less
把加減的方法都加上下文對象async
添加和減小的點擊事件ide
中間數字的數量的設置ui
cart_item在調用CartCount的時候須要傳入上篇的單個對象this
修正一個地方provide/cart.dartspa
這裏toString是放在外面的3d
provide/cart.dartcode
//商品數量加減 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=0;//循環的索引 int changeIndex=0;//要改變的索引 tempList.forEach((item){ if(item['goodsId']==cartItem.goodsId){ changeIndex=tempIndex; } tempIndex++; }); if(todo=='add'){ cartItem.count++; }else if(cartItem.count>1){ 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(165), margin: EdgeInsets.only(top:5.0), decoration: BoxDecoration( border: Border.all(width: 1,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),//是正方形的因此寬和高都是45 height: ScreenUtil().setHeight(45), alignment: Alignment.center,//上下左右都居中 decoration: BoxDecoration( color:item.count>1 ? Colors.white:Colors.black12,//按鈕顏色大於1是白色,小於1是灰色 border: Border(//外層已經有邊框了因此這裏只設置右邊的邊框 right:BorderSide(width: 1.0,color: Colors.black12) ) ), child:item.count>1 ? Text('-') : Text(' '),//數量小於1 什麼都不顯示 ), ); } //加號 Widget _addBtn(context){ return InkWell( onTap: (){ Provide.value<CartProvide>(context).addOrReduceAction(item, 'add'); }, child: Container( width: ScreenUtil().setWidth(45),//是正方形的因此寬和高都是45 height: ScreenUtil().setHeight(45), 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),//爬兩個數字的這裏顯示不下就寬一點70 height: ScreenUtil().setHeight(45),//高度和加減號保持同樣的高度 alignment: Alignment.center,//上下左右居中 color: Colors.white,//北京顏色 設置爲白色 child: Text('${item.count}'),//先默認設置爲1 由於後續是動態的獲取數字 ); } }