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

代码文档

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();
      }
    },
 //--------------------------------------------  


 
  ),
),