Flutter實戰視頻-移動電商-61.購物車_商品數量的加減操做

61.購物車_商品數量的加減操做

provide/cart.dart

pages/cart_page/cart_count.dart

先引入provide和cartProvidejson

定義接收一個item對象的參數less

把加減的方法都加上下文對象async

添加和減小的點擊事件ide

 

中間數字的數量的設置ui

cart_item.dart

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 由於後續是動態的獲取數字
    );
  }

}
View Code
相關文章
相關標籤/搜索