Flutter实战视频-移动电商-61.购物车_商品数量的加减操作

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=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 因为后续是动态的获取数字
    );
  }

}