Flutter實戰視頻-移動電商-63.購物車_詳細頁顯示購物車商品數量

63.購物車_詳細頁顯示購物車商品數量

購物車的圖標嵌套在statck組件裏面

外層套了一個stack組件

數量咱們須要用Provide

 

返回一個container來作樣式

氣泡效果，中間是個數字外面 是一個圓

若是想組成一個圓的形式，內邊距就必須用formLRB這種形式

 

 

點擊加入購物車後，數量發生變化provide/cart.dart

provide/cart.dart

 

效果展現：

 

最終代碼

 

details_page/detail.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provide/provide.dart';
import '../../provide/cart.dart';
import '../../provide/details_info.dart';
import '../../provide/currentIndex.dart';

class DetailsBottom extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var goodsInfo=Provide.value<DetailsInfoProvide>(context).goodsInfo.data.goodInfo;//當前商品的詳情
    var goodsId=goodsInfo.goodsId;
    var goodsName=goodsInfo.goodsName;
    var count=1;//默認爲1
    var price=goodsInfo.presentPrice;
    var images=goodsInfo.image1;


    return Container(
      width: ScreenUtil().setWidth(750),
      color: Colors.white,
      height: ScreenUtil().setHeight(80),
      child: Row(
        children: <Widget>[
          Stack(
            children: <Widget>[
              InkWell(
                onTap: (){
                  Provide.value<CurrentIndexProvide>(context).changeIndex(2);
                  Navigator.pop(context);
                },
                child: Container(
                  width: ScreenUtil().setWidth(110),
                  alignment: Alignment.center,
                  child: Icon(
                    Icons.shopping_cart,
                    size:35,//圖標沒有自適應 要是設置size的大小
                    color: Colors.red,
                  ),
                ),            
              ),
              Provide<CartProvide>(
                builder: (context,child,val){
                  int goodsCount = Provide.value<CartProvide>(context).allGoodsCount;
                  return Positioned(
                    top: 0,
                    right: 10,
                    child: Container(
                      padding: EdgeInsets.fromLTRB(6, 3, 6, 3),
                      decoration: BoxDecoration(
                        color: Colors.pink,
                        border: Border.all(width: 2,color: Colors.white),
                        borderRadius: BorderRadius.circular(12.0),//圓角
                      ),
                      child: Text(
                        '${goodsCount}',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: ScreenUtil().setSp(22)
                        ),
                      ),
                    ),
                  );
                },
              )
            ],
          ),
          
          InkWell(
            onTap: () async{
              await Provide.value<CartProvide>(context).save(goodsId, goodsName, count, price, images);
            },
            child: Container(
              alignment: Alignment.center,
              width: ScreenUtil().setWidth(320),//750 - 110 再除以2 評分
              height: ScreenUtil().setHeight(80),
              color: Colors.green,
              child: Text(
                '加入購物車',
                style:TextStyle(color:Colors.white,fontSize: ScreenUtil().setSp(28)),
              ),
            ),
          ),
          InkWell(
            onTap: () async{
              await Provide.value<CartProvide>(context).remove();
            },
            child: Container(
              alignment: Alignment.center,
              width: ScreenUtil().setWidth(320),//750 - 110 再除以2 評分
              height: ScreenUtil().setHeight(80),
              color: Colors.red,
              child: Text(
                '當即購買',
                style:TextStyle(color:Colors.white,fontSize: ScreenUtil().setSp(28)),
              ),
            ),
          )
        ],
      ),
    );
  }
}

View Code

 

 

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=[];
  double allPrice = 0;//總價格
  int allGoodsCount = 0;//商品總數
  bool isAllCheck=true;//全選 默認true

  //聲明一個異步的方法,購物車操做放在前臺不在請求後臺的數據
  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=0;//foreach循環的索引
    allPrice=0;//總價先初始化爲0
    allGoodsCount=0;//全部商品數量
    //循環判斷列表是否存在該goodsId的商品，若是有就數量+1
    tempList.forEach((item){
      if(item['goodsId']==goodsId){
        tempList[ival]['count']=item['count']+1;
        cartList[ival].count++;
        isHave=true;
      }
      if(item['isCheck']){
        allPrice += (cartList[ival].price * cartList[ival].count);
        allGoodsCount += cartList[ival].count;
      }
      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));

      allPrice+=(count*price);
      allGoodsCount+=count;
    }
    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();
      allPrice=0;//價格先初始化爲0
      allGoodsCount=0;//數量先初始化爲0
      isAllCheck=true;//循環以前初始化一下
      tempList.forEach((item){
        if(item['isCheck']){
          allPrice+=(item['count']*item['price']);
          allGoodsCount +=item['count'];
        }else{
          isAllCheck=false;
        }
        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=0;//定義循環的索引
    int deleteIndex=0;//要刪除的索引
    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方法裏面有通知，這裏就再也不調用了
  }

  changeCheckState(CartInfoModel cartItem) async{
    SharedPreferences prefs=await SharedPreferences.getInstance();
    cartString=prefs.getString('cartInfo');
    List<Map> tempList=(json.decode(cartString.toString()) as List).cast();
    int tempIndx=0;//歷史索引
    int changeIndex=0;//改變的索引
    tempList.forEach((item){
      if(item['goodsId']==cartItem.goodsId){
        changeIndex=tempIndx;
      }
      tempIndx++;
    });

    tempList[changeIndex]=cartItem.toJson();//toJson就變成了Map值
    cartString=json.encode(tempList).toString();
    prefs.setString('cartInfo', cartString);

    await getCartInfo();//再次從新獲取購物車的數據
  }

  //點擊全選按鈕操做
  changeAllCheckBtnState(bool isCheck) async{
    SharedPreferences prefs=await SharedPreferences.getInstance();
    cartString=prefs.getString('cartInfo');
    List<Map> tempList=(json.decode(cartString.toString()) as List).cast();
    List<Map> newList=[];//這裏必須初始化爲[]聲明爲一個空的值
    
    for(var item in tempList)
    {
      //dart在循環的時候是不容許改變老的值的
      var newItem=item;//把老的item賦值給新的item
      newItem['isCheck']=isCheck;
      newList.add(newItem);
    }

    cartString=json.encode(newList).toString();
    prefs.setString('cartInfo', cartString);

    await getCartInfo();//最後中心獲取一下購物車的列表數據
  }

  //商品數量加減
  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();//從新獲取購物車數據
  }

}

View Code