60.购物车_全选按钮的交互效果制作

主要做全选和复选框的这两个功能

provide/cart.dart

业务逻辑写到provide里面

先持久化取出来字符串,把字符串编程list。循环list

cart_page/cart_item.dart

每一项的复选框的事件

单个复选框的效果预览

全部取消,价格和数量都发生了变化

全选按钮

全选单独声明一个变量,

然后我们需要在获取全部购物车列表的方法里面做一些事情

循环之前先初始化为true,循环的时候只要是有没选中的那么全选就是false

cart_page/cart_bottom.dart

只要有一个没有选中,就不会都选中

全选中,全选的付款狂也是选中的状态

全选按钮的事件

provide/cart.dart中要单独写一个方法

新增点击全选和取消全选的方法

效果展示

点击后都取消了选择的状态

最终代码:

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 强制类型是MapList<Map> tempList=(temp as List).cast();//把temp转成listbool isHave=false;//是否已经存在了这条记录int ival=0;//foreach循环的索引//循环判断列表是否存在该goodsId的商品,如果有就数量+1
    tempList.forEach((item){if(item['goodsId']==goodsId){tempList[ival]['count']=item['count']+1;cartList[ival].count++;isHave=true;}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));}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=[];//把最终的结果先设置为空listif(cartString==null){cartList=[];//如果持久化内没有数据 那么就还是空的list}else{//声明临时的变量List<Map> tempList=(json.decode(cartString.toString()) as List).cast();allPrice=0;//价格先初始化为0allGoodsCount=0;//数量先初始化为0isAllCheck=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赋值给新的itemnewItem['isCheck']=isCheck;newList.add(newItem);}cartString=json.encode(newList).toString();prefs.setString('cartInfo', cartString);await getCartInfo();//最后中心获取一下购物车的列表数据
  }}

View Code

cart_bottom.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provide/provide.dart';
import '../../provide/cart.dart';class CartBottom extends StatelessWidget {@overrideWidget build(BuildContext context) {return Container(padding: EdgeInsets.all(5.0),color: Colors.white,child: Provide<CartProvide>(builder: (context,child,val){return Row(children: <Widget>[_selectAllBtn(context),_allPriceArea(context),_goButton(context)],);}));}//全选
  Widget _selectAllBtn(context){bool isAllCheck=Provide.value<CartProvide>(context).isAllCheck;return Container(child: Row(children: <Widget>[Checkbox(value: isAllCheck,activeColor: Colors.pink,//激活的颜色onChanged: (bool val){Provide.value<CartProvide>(context).changeAllCheckBtnState(val);},//事件
          ),Text('全选')],),);}//合计
  Widget _allPriceArea(context){double allPrice = Provide.value<CartProvide>(context).allPrice;return Container(width: ScreenUtil().setWidth(430),child: Column(children: <Widget>[Row(children: <Widget>[Container(alignment: Alignment.centerRight,width: ScreenUtil().setWidth(280),child: Text('合计:',style:TextStyle(fontSize:ScreenUtil().setSp(36))),),//红色的价格
              Container(alignment: Alignment.centerLeft,width: ScreenUtil().setWidth(150),child: Text('${allPrice}',style: TextStyle(fontSize: ScreenUtil().setSp(36),color: Colors.red)),)],),//第二行
          Container(width: ScreenUtil().setWidth(430),//和第一行一样宽
            alignment: Alignment.centerRight,child: Text('满10元免配送费,预购免配送费',style: TextStyle(color: Colors.black38,fontSize: ScreenUtil().setSp(22)),),)],),);}//结算 用 inkWell
  Widget _goButton(context){int allGoodsCount= Provide.value<CartProvide>(context).allGoodsCount;return Container(width: ScreenUtil().setWidth(160),padding: EdgeInsets.only(left:10.0),child: InkWell(onTap: (){},child: Container(padding: EdgeInsets.all(10.0),alignment: Alignment.center,//居中对齐
          decoration: BoxDecoration(color: Colors.red,borderRadius: BorderRadius.circular(3.0)//圆角
          ),child: Text('结算(${allGoodsCount})',style: TextStyle(color: Colors.white),),),),);}
}

View Code

转载于:https://www.cnblogs.com/wangjunwei/p/10795318.html

Flutter实战视频-移动电商-60.购物车_全选按钮的交互效果制作相关推荐

  1. Flutter实战视频-移动电商-59.购物车_计算商品价格和数量

    59.购物车_计算商品价格和数量 本节课主要是加上自动计算的功能 provide/cart.dart 在provide的类里面增加两个变量 cart_bottom.dart 三个组件因为我们都需要套一 ...

  2. Flutter实战视频-移动电商-45.详细页_说明区域UI编写

    45.详细页_说明区域UI编写 pages/details_page/details_expain.dart 详情页面引用组件 效果展示: 最终代码: import 'package:flutter/ ...

  3. vue实战项目:电商管理系统实现步骤笔记(一)

    vue实战项目 视频地址以及项目文件 一.项目概述 1.1电商项目基本业务概述 1.2电商后台管理系统的功能 1.3电商后台管理系统的开发模式(前后端分离) 1.4电商后台管理系统的技术选型 1.4. ...

  4. 20-Vue实战项目:电商管理系统(Element-UI)总结

    20-Vue实战项目:电商管理系统(Element-UI)总结 结果如下: 这算是我自己跟着视频做的第一个比较完整的可以看的项目了,用时18天,但这视频的总时间是20个小时,自己还是比较的低效率.不多 ...

  5. 新内容、新交互、新增长:视频云为短视频及电商直播行业高效赋能

    简介:阿里云国际云峰会重磅发布 在 6 月 8 日举行的 2021 阿里云国际云峰会(2021 ALIBABA CLOUD SUMMIT)上,阿里云发布了直播解决方案等 20 多种产品.解决方案以及升 ...

  6. 【实战高保真】电商saas全套原型、店铺管理、店铺装修、商品管理、会员管理、维权管理、会员管理、营销管理、财务管理、渠道管理、saas系统、Axure高保真后台管理原型、rp源文件、axure原型

    [实战高保真]电商saas全套原型.店铺管理.店铺装修.商品管理.会员管理.维权管理.会员管理.营销管理.财务管理.渠道管理.saas系统.Axure高保真后台管理原型.rp源文件.axure原型 A ...

  7. 【报告分享】2021上半年短视频及电商生态研究报告.pdf(附下载链接)

    大家好,我是文文(微信号:sscbg2020),今天给大家分享飞瓜数据于2021年7月份发布的<2021上半年短视频及电商生态研究报告.pdf>,关注抖音.短视频.兴趣电商.直播电商等的伙 ...

  8. 【报告分享】2020快手短视频直播电商营销增长宝典.pdf(附下载链接)

    大家好,我是文文(微信:sscbg2020),今天给大家分享快手.磁力引擎和明略科技于2020年7月联合发布的报告<2020快手短视频直播电商营销增长宝典.pdf>. 在充满不确定性的大环 ...

  9. 「短视频+社交电商」营销模式爆发式发展,带来的好处有什么?

    [短视频+社交电商],可以说是现在最火爆的营销模式,在流量和变现方面有着非常大的优势.从18年来到现在我国短视频行业进入了爆发式发展, 电商纷纷转型布局短视频把公域流量转化成自己私域流量. 短视频平台 ...

最新文章

  1. java 编写命令行工具_编写命令行工具
  2. javascript按字节截取标题中字符串
  3. httpd 处理模型
  4. 快速开发框架工作笔记002---项目开发中整理_整合好的_Netty高并发处理快速开发框架_Netty快速开发框架
  5. 物联网云计算成本核算 小厂的出路在哪里
  6. 重构——62提炼子类(Extract Subclass)
  7. css木马式自动轮播,基于jQuery实现自动轮播旋转木马特效_jquery
  8. R语言软件R Studio以及python下载函数包使用常见问题(持续更新中)
  9. 2021年下半年软件设计师下午真题试题(案例分析)及答案
  10. 无法远程连接到计算机 凭证,win10系统凭证不工作导致远程桌面连接不了的解决办法...
  11. PAT --- 1055.集体照 (25 分)
  12. 【Grafana】通过阿里云日志服务监控Nginx访问日志显示统计信息
  13. 遇见心想事成的自己……
  14. Python choice() 函数
  15. 基于Node.js的3DTiles三维倾斜摄影模型爬虫
  16. XPath解析中的 'Element a at 0x5308a80'是什么
  17. ionic3学习2(API)
  18. 湖北二本计算机大学录取分数线,湖北二本投档分数线
  19. 服装网上销售“美国版”——互动+体验=成功
  20. java math 弧度,Java Math.toRadians()角度转换为弧度

热门文章

  1. C#编写最小化时隐藏为任务栏图标的Window appllication
  2. Fedora 12 安装配置subversion
  3. python爬虫图片实例-【图文详解】python爬虫实战——5分钟做个图片自动下载器...
  4. 怎么用python处理excel文件-用Python读写Excel文件的方式比较
  5. python可以做什么项目-适合Python 新手的5大练手项目,你练了么?
  6. python pdf-浅谈Python处理PDF的方法
  7. python基本使用-python基本用法
  8. 0基础学python看什么书-零基础学python编程需要看什么书?
  9. python编程自学能学会吗-python编程还能自学?怎么能学好? - 【大连东软睿道】
  10. python中一共有多少个关键字-Python之33个关键字是哪些