Flutter-防京东商城项目-编写详情页添加购物车-27

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

代码文档

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

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

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

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

本章目标通过商品详情成功把商品添加到购物车，注意下面gif图片控制台打印的数据，成功添加进去，但是在购物车页面还没有显示出来。

1.复制一个一模一样的控件下来

CartNum源码

import 'package:flutter/material.dart';
import 'package:flutter_app/services/screenAdaper.dart';
import 'package:provider/provider.dart';
import '../../provider/Cart.dart';
class CartNum extends StatefulWidget {
  CartNum({Key key}) : super(key: key);

  _CartNumState createState() => _CartNumState();
}

class _CartNumState extends State<CartNum> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: ScreenAdaper.width(164),
      decoration:
      BoxDecoration(border: Border.all(width: 1, color: Colors.black12)),
      child: Row(
        children: <Widget>[
          _leftBtn(),
          _centerArea(),
          _rightBtn()
        ],
      ),
    );
  }

  //左侧按钮

  Widget _leftBtn() {
    return InkWell(
      onTap: () {},
      child: Container(
        alignment: Alignment.center,
        width: ScreenAdaper.width(45),
        height: ScreenAdaper.height(45),
        child: Text("-"),
      ),
    );
  }

  //右侧按钮
  Widget _rightBtn() {
    return InkWell(
      onTap: (){


      },
      child: Container(
        alignment: Alignment.center,
        width: ScreenAdaper.width(45),
        height: ScreenAdaper.height(45),
        child: Text("+"),
      ),
    );
  }

//中间
  Widget _centerArea() {
    return Container(
      alignment: Alignment.center,
      width: ScreenAdaper.width(70),
      decoration: BoxDecoration(
          border: Border(
            left: BorderSide(width: 1, color: Colors.black12),
            right: BorderSide(width: 1, color: Colors.black12),
          )),
      height: ScreenAdaper.height(45),
      child: Text("1"),
    );
  }
}

2.回到

导入

import 'package:flutter_app/pages/ProductContent/CartNum.dart';

增加下面的代码

child: Stack(
  children: <Widget>[
    Container(
      padding: EdgeInsets.all(ScreenAdaper.width(20)),
      child: ListView(
        children: <Widget>[
          Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: _getAttrWidget(setBottomState)),



//--------------------------------------------
          Divider(),
          Container(
            margin: EdgeInsets.only(top: 10),
            height: ScreenAdaper.height(80),
            child: InkWell(
              onTap: () {
                _attrBottomSheet();
              },
              child: Row(
                children: <Widget>[
                  Text("数量: ",
                      style: TextStyle(
                          fontWeight: FontWeight.bold)),
                  SizedBox(width: 10),
                  CartNum(this._productContent)
                ],
              ),
            ),
          )
  //--------------------------------------------






        
        ],
      ),
    ),

写完后会报错，先不用管

回到

模型里面增加属性需要加3个地方

//新增
int count;
String selectedAttr;

this.count,
this.selectedAttr

//新增
count=1;
selectedAttr='';

4.回到

导入

import 'package:flutter_app/model/ProductContentModel.dart';

4.1添加下面的代码

class CartNum extends StatefulWidget {


//--------------------------------------------
  ProductContentitem _productContent;
//--------------------------------------------  
  
  CartNum(this._productContent,{Key key}) : super(key: key);

  _CartNumState createState() => _CartNumState();
}

class _CartNumState extends State<CartNum> {




//--------------------------------------------
  ProductContentitem _productContent;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    this._productContent=widget._productContent;
  }
//--------------------------------------------  

4.2给 左侧 中间 右侧 部件赋值

if( this._productContent.count>1){
  setState(() {
    this._productContent.count=this._productContent.count-1;
  });
}

setState(() {
  this._productContent.count=this._productContent.count+1;
});

Text("${this._productContent.count}"),

5.创建一个新的文件

class CartServices{

  static addCart(item){
    //把对象转换成Map类型的数据
    item=CartServices.formatCartData(item);

    print(item);

//     {_id: 5a0425bc010e711234661439, title: 磨砂牛皮男休闲鞋-有属性, price: 688, selectedAttr: 牛皮 ,系带,黄色, count: 3, pic: public\upload\RinsvExKu7Ed-oc
// s_7W1DxYO.png, checked: true}


  }

  //过滤数据
  static formatCartData(item){
    final Map data = new Map<String, dynamic>();
    data['_id'] = item.sId;
    data['title'] = item.title;
    data['price'] = item.price;
    data['selectedAttr'] = item.selectedAttr;
    data['count'] = item.count;
    data['pic'] = item.pic;
    //是否选中
    data['checked'] = true;
    return data;
  }

}

回到

import 'package:flutter_app/services/CartServices.dart';

5.1初始化

setState(() {
  this._selectedValue = tempArr.join(',');




//--------------------------------------------
  //给筛选属性赋值
  this._productContent.selectedAttr=this._selectedValue;
  //--------------------------------------------



});

5.2添加购物车

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




//--------------------------------------------
    CartServices.addCart(this._productContent);
    //关闭底部筛选属性
    Navigator.of(context).pop();
//--------------------------------------------




  },
),