Flutter-防京东商城项目-增加购物车数量-28

冯汉栩

已于 2024-03-05 21:26:20 修改

阅读量302

点赞数

分类专栏： Flutter 文章标签： flutter ios

于 2021-09-05 10:24:38 首次发布

本文链接：https://blog.csdn.net/weixin_38716347/article/details/120110864

版权

Flutter 专栏收录该内容

47 篇文章 10 订阅

订阅专栏

这篇博客详细介绍了如何使用Flutter实现防京东商城的购物车功能，包括添加商品到购物车、处理商品数量、存储和读取购物车数据、以及在购物车页面展示商品。博主分享了他们的代码实现，并强调了通过正确的方法可以避免重复劳动，帮助读者更好地理解和掌握Flutter购物车的实现技巧。

摘要由CSDN通过智能技术生成

一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。

代码文档

Flutter防京东商城源码(1-10)链接

Flutter防京东商城源码(11-20)链接

Flutter防京东商城源码(21-30)链接

Flutter防京东商城源码(31-46)链接

本章学到的效果
请添加图片描述

1.回到

在这里插入图片描述

替换里面的所有内容，其实增加try的一个方法。
在这里插入图片描述

import 'dart:convert';
import 'Storage.dart';
import '../config/Config.dart';

static addCart(item) async{

 /*
      1、获取本地存储的cartList数据
      2、判断cartList是否有数据
            有数据：
                1、判断购物车有没有当前数据：
                        有当前数据：
                            1、让购物车中的当前数据数量 等于以前的数量+现在的数量
                            2、重新写入本地存储

                        没有当前数据：
                            1、把购物车cartList的数据和当前数据拼接，拼接后重新写入本地存储。

            没有数据：
                1、把当前商品数据以及属性数据放在数组中然后写入本地存储



                List list=[
                  {"_id": "1",
                    "title": "磨砂牛皮男休闲鞋-有属性",
                    "price": 688,
                    "selectedAttr": "牛皮 ,系带,黄色",
                    "count": 4,
                    "pic":"public\upload\RinsvExKu7Ed-ocs_7W1DxYO.png",
                    "checked": true
                  },
                    {"_id": "2",
                    "title": "磨xxxxxxxxxxxxx",
                    "price": 688,
                    "selectedAttr": "牛皮 ,系带,黄色",
                    "count": 2,
                    "pic":"public\upload\RinsvExKu7Ed-ocs_7W1DxYO.png",
                    "checked": true
                  }

                ];


      */


    try {
      List cartListData = json.decode(await Storage.getString('cartList'));

      //判断购物车有没有当前数据
      bool hasData=cartListData.any((value){
        return value['_id']==item['_id']&&value['selectedAttr']==item['selectedAttr'];
      });

      if(hasData){
        for(var i=0;i<cartListData.length;i++){
          if(cartListData[i]['_id']==item['_id']&&cartListData[i]['selectedAttr']==item['selectedAttr']){

            cartListData[i]["count"]=cartListData[i]["count"]+1;
          }
        }
        await Storage.setString('cartList', json.encode(cartListData));

      }else{
        cartListData.add(item);
        await Storage.setString('cartList', json.encode(cartListData));
      }


    } catch (e) {
      List tempList=[];
      tempList.add(item);
      await Storage.setString('cartList', json.encode(tempList));
    }

2.回到

在这里插入图片描述

里面替换里面的所有内容

import 'package:flutter/material.dart';
import 'dart:convert';
import '../services/Storage.dart';

class Cart with ChangeNotifier{

  List _cartList=[];  //状态

  List get cartList=>this._cartList;

  Cart(){

    this.init();
  }
  //初始化的时候获取购物车数据
  init() async{
    try {
      List cartListData = json.decode(await Storage.getString('cartList'));
      this._cartList=cartListData;
    } catch (e) {
      this._cartList=[];
    }
    notifyListeners();
  }
  updateCartList(){
    this.init();
  }


}

3.回来

Cart 用来存储商品添加到购物车的模型数据
在这里插入图片描述

购物车页面。

3.1把下面注释的这句话打开

//    var cartProvider = Provider.of<Cart>(context);

3.2把下面的内容删除

在这里插入图片描述

3.3然后替换为下面的内容

在这里插入图片描述

Column(
    children: cartProvider.cartList.map((value) {
      return CartItem(value);
}).toList()),
SizedBox(height: ScreenAdaper.height(100))

这个时候报了一个错不用管它

3.4回到

在这里插入图片描述

增加下面的代码
在这里插入图片描述

class CartItem extends StatefulWidget {
  Map _itemData;
  CartItem(this._itemData,{Key key}) : super(key: key);

  _CartItemState createState() => _CartItemState();
}

class _CartItemState extends State<CartItem> {
  Map _itemData;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    this._itemData=widget._itemData;
  }

3.5然后赋值图片

在这里插入图片描述

"${_itemData["pic"]}"

赋值标题和赋值数量

Text("${_itemData["title"]}", maxLines: 2),
Text("${_itemData["selectedAttr"]}", maxLines: 2),

赋值价格

"￥${_itemData["price"]}"

4.回到模型

CartServices 商品详情点击添加数据过滤掉重复模型直接在原来的商品模型上递增一，如果没有该商品模型就添加新的模型。
在这里插入图片描述

修改下面的内容
在这里插入图片描述

  //处理图片
  String pic = item.pic;
  pic = Config.domain + pic.replaceAll('\\', '/');


  data['pic'] = pic;

5.修改下面的代码用户购物车没有数据是的又好提示

在这里插入图片描述

body: cartProvider.cartList.length > 0 ? Stack(..): Center(
    child: Text("购物车空空的..."),
  ),

6.回到

在这里插入图片描述

添加下面的代码调整cell的文字对齐方式
在这里插入图片描述

child: Container(
  padding: EdgeInsets.fromLTRB(10, 10, 10, 5),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.start,//---------------------------------

7.添加购物车顺便通知购物车页面更新购物车显示回到

在这里插入图片描述

导入

//广播第三方  一个是第三头文件 另一个是第三方基础上封装
import 'package:provider/provider.dart';
import '../../provider/Cart.dart';

创建实例变量

var cartProvider;

初始化实例变量
在这里插入图片描述

@override
Widget build(BuildContext context) {


//--------------------------------------------
this.cartProvider = Provider.of<Cart>(context);
//--------------------------------------------




//处理图片
String pic = Config.domain + this._productContent.pic;
pic = pic.replaceAll('\\', '/');
return Container(
  padding: EdgeInsets.all(10),

应用实例变量替换下面的代码
在这里插入图片描述

color: Color.fromRGBO(253, 1, 0, 0.9),
text: "加入购物车",


//--------------------------------------------
cb: () async{                               
 await CartServices.addCart(this._productContent);
  //关闭底部筛选属性
  Navigator.of(context).pop();
  //调用Provider 更新数据
  this.cartProvider.updateCartList();
},
//--------------------------------------------

8.添加重复的商品只添加数量

回到
在这里插入图片描述

拉倒最底部，修改下面的代码为，传递一个参数进去

Align(
  alignment: Alignment.centerRight,
  child: CartNum(_itemData),
)

这是会报错，CartNum缺乏接收参数，继续往下写

8.1回到

在这里插入图片描述

添加下面的代码
在这里插入图片描述

class CartNum extends StatefulWidget {


//--------------------------------------------
  Map _itemData;
//--------------------------------------------


  CartNum(this._itemData,{Key key}) : super(key: key);

  _CartNumState createState() => _CartNumState();
}

class _CartNumState extends State<CartNum> {
  
//--------------------------------------------
  Map _itemData;
  @override
  void initState() {
    super.initState();
    this._itemData=widget._itemData;
  }
//--------------------------------------------

回到商品详情，点击添加购物车按键把商品添加到购物车
然后把代码拉到最底部。把获取回来的数据填写到数量里面

child: Text("${_itemData["count"]}"),

回到在这里插入图片描述

在头部导入

import 'package:provider/provider.dart';
import '../provider/Cart.dart';
import '../services/CartServices.dart';

最后补充一下

@override
Widget build(BuildContext context) {


//--------------------------------------------
  var cartProvider = Provider.of<Cart>(context);
  ScreenAdaper.init(context);
//--------------------------------------------

  

  return DefaultTabController(

在这里插入图片描述
替换下面的代码

Expanded(
  flex: 1,
  child: JdButton(
    color:Color.fromRGBO(253, 1, 0, 0.9),
    text: "加入购物车",



 //--------------------------------------------   
    cb: () async{
      if(this._productContentList[0].attr.length>0){
          //广播 弹出筛选
          eventBus.fire(new ProductContentEvent('加入购物车'));
      }else{ 
          await CartServices.addCart(this._productContentList[0]);                         
          //调用Provider 更新数据
          cartProvider.updateCartList();
      }
    },
 //--------------------------------------------  


 
  ),
),