Flutter-防京东商城项目-购物车 数据增加 全选反选功能-29

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

代码文档

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

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

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

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

本章学到的效果：

先写购物车增加减小数量,回到添加下面的代码

itemCountChange() {
  Storage.setString("cartList", json.encode(this._cartList));
  notifyListeners();
}

回到添加下面的代码
导入

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

创建属性

var cartProvider;

初始化

@override
Widget build(BuildContext context) {

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

使用

//左侧按钮
Widget _leftBtn() {
  return InkWell(
    onTap: () {


//--------------------------------------------
      if(_itemData["count"]>1){
         _itemData["count"]--;
         this.cartProvider.itemCountChange();
      }
//--------------------------------------------



      
    },
    .........
  );
}

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


//--------------------------------------------
         _itemData["count"]++;
        this.cartProvider.itemCountChange();
//--------------------------------------------


        
    },
.........
  );
}

3.实现全选反选 回到把里面的内容全部替换掉

List _cartList = []; //状态
bool _isCheckedAll = false; //状态
List get cartList => this._cartList;
bool get isCheckedAll => this._isCheckedAll;

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

updateCartList() {
  this.init();
}

itemCountChange() {
  Storage.setString("cartList", json.encode(this._cartList));
  notifyListeners();
}

//全选 反选
checkAll(value) {
  for (var i = 0; i < this._cartList.length; i++) {
    this._cartList[i]["checked"] = value;
  }
  this._isCheckedAll = value;
  Storage.setString("cartList", json.encode(this._cartList));
  notifyListeners();
}

//判断是否全选
bool isCheckAll() {
  if (this._cartList.length > 0) {
    for (var i = 0; i < this._cartList.length; i++) {
      if (this._cartList[i]["checked"] == false) {
        return false;
      }
    }
    return true;
  }
  return false;
}

//监听每一项的选中事件
itemChage(){
    if(this.isCheckAll()==true){
      this._isCheckedAll=true;
    }else{
       this._isCheckedAll=false;
    }

    Storage.setString("cartList", json.encode(this._cartList));
    notifyListeners();
}

4.回到编写每个Cell逻辑。

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

初始化

@override
Widget build(BuildContext context) {

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

赋值

child: Checkbox(

//--------------------------------------------
  value: _itemData["checked"],
  //--------------------------------------------

  onChanged: (val) {

  //--------------------------------------------
   _itemData["checked"]=!_itemData["checked"];
   cartProvider.itemChage();
   //--------------------------------------------

  },
  activeColor: Colors.pink,
),

5.回到编写底部全选按键逻辑

child: Checkbox(
//--------------------------------------------
  value: cartProvider.isCheckedAll,
//--------------------------------------------  
  activeColor: Colors.pink,
  onChanged: (val) {
//--------------------------------------------
    //实现全选或者反选
    cartProvider.checkAll(val);
//-------------------------------------------- 
  },
),