58.购物车_删除商品功能制作 主要做购物车后面的删除按钮 删除的方法写在provide里面 provide/cart.dart文件 传入goodsId,循环对比,找到后进行移除 //删除单个购物车商品 deleteOneGoods(String goodsId) async{ SharedPreferences prefs=await SharedPreferences.getInstance(); cartString=prefs.getString('cartInfo'); List<Ma…

52.购物车_数据模型建立和Provide修改 根据json数据生成模型类 {,"price":830.0,"images":"http://images.baixingliangfan.cn/shopGoodsImg/20181229/20181229211422_8507.jpg"} https://javiercbk.github.io/json_to_dart/ model文件夹下新建类cartInfo.dart 类名叫做CartInfo…

53.购物车_商品列表UI框架布局 cart_page.dart 清空原来写的持久化的代码; 添加对应的引用,stless生成一个静态的类.建议始终静态的类,防止重复渲染 纠正个错误,上图的CartPage单词拼错了,这里改过来防止后面,运行app的时候报错 build内我们使用scaffold脚手架 创建Future方法获取购物车持久化数据 取数据需要等待时间的,所以之类使用异步async,我们的provide需要context上下文,所以方法内我们要接收一个context对象的参数 在bod…

54.购物车_商品列表子项布局 子项做成一个单独的页面 新建cartItem.dart文件 新建cart_page文件夹,在里面新建cart_item.dart页面, 页面名字叫做CartItem 定义变量,购物车的model类,构造函数接收 先做一下上下左右的边距,margin是外边距.padding是内边距 内边距,外边距,下边的边框样式 我们这里使用Row布局,把没一块都分成一个单独的Widget防止嵌套 首先编写复选按钮的样式 商品图片方法: 商品名称 因为我们还要做商品的数量的加减,所…

55.购物车_底部结算栏UI制作 主要做下面结算这一栏目 cart_bottom.dart页面 先设置下内边距 拆分成三个子元素 全选 因为有一个文本框和一个全选的text文本,所以这里也用了Row布局 合计 先用column布局,上下分成两块,然后上面一行再用Row布局 每行的宽度设置为430的宽度 结算按钮 组合三个小部件 放到页面中预览 cart_page.dart 这里我们使用stack组件,这样把原来的ListView当做子组件嵌入到Stack组件内 效果预览: 我自己打的代码又溢出了…

56.购物车_商品数量控制区域制作 主要做购物车中的数量这里 cart_page文件夹下新建cart_count.dart 减少按钮 因为会有点击事件,所以这里我们使用InkWell. child里面外层套一个Container,为什么要外层始终套一个Container呢,因为我们可以设置内边距.外边距.宽和高等等 //减少按钮 Widget _reduceBtn(){ return InkWell( onTap: (){}, child: Container( width: ScreenUti…

57.购物车_在Model中增加选中字段 先修改model类 model/cartInfo.dart类增加是否选中的属性 修改provide 修改UI部分pages/cart_page/cart_item.dart 测试效果 出现问题的原因,应该是在购物车内持久化的数据,没有isCheck这个新增加的属性,所以就报错了我们需要先点进去一个商品,把持久化的购物车数据清空掉,再重新添加购物车的持久化数据 然后重新添加几个商品到购物车内 最终代码 model/cartInfo.dart class C…

59.购物车_计算商品价格和数量 本节课主要是加上自动计算的功能 provide/cart.dart 在provide的类里面增加两个变量 cart_bottom.dart 三个组件因为我们都需要套一层provide所以这里都传入context对象 把三个组件方法,分别都加上context 引入provide和cart.dart import 'package:provide/provide.dart'; import '../../provide/cart.dart'; 总价 从provide…

60.购物车_全选按钮的交互效果制作 主要做全选和复选框的这两个功能 provide/cart.dart 业务逻辑写到provide里面 先持久化取出来字符串,把字符串编程list.循环list cart_page/cart_item.dart 每一项的复选框的事件 单个复选框的效果预览 全部取消,价格和数量都发生了变化 全选按钮 全选单独声明一个变量, 然后我们需要在获取全部购物车列表的方法里面做一些事情 循环之前先初始化为true,循环的时候只要是有没选中的那么全选就是false cart_…

61.购物车_商品数量的加减操作 provide/cart.dart pages/cart_page/cart_count.dart 先引入provide和cartProvide 定义接收一个item对象的参数 把加减的方法都加上下文对象 添加和减少的点击事件 中间数字的数量的设置 cart_item.dart cart_item在调用CartCount的时候需要传入上篇的单个对象 效果演示: 修正一个地方provide/cart.dart 这里toString是放在外面的 最终代码: prov…