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

该文章属于[Flutter每周一组件]系列,其它组件可以查看该系列下的文章,该系列会不间断更新:所有组件的demo已经上传值Github: https://github.com/xj124456/flutter_widget_demo 欢迎Star 博客:思否, 掘金, 知乎, 简书, 慕课, CSDN, 博客园, DX前端 公众号:DX前端框架知识库 联系我:公众号菜单点击联系我 使用场景 组件解释:固定高度的单个行,通常包含一些文本以及前导或尾随图标. 当需要给一个列表list的时候,你可以

在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏,传入 endDrawer 可以定义右侧边栏.侧边栏默认是隐藏的,我们可以通过手指滑动显示侧边栏,也可以通过点击按钮显示侧边栏.   DrawerHeader组件的常用属性: 属性 描述 decoration 设置顶部背景颜色 child 配置子元素 padding 内边距 margin 外边距 UserAccountsDrawerHeader组件的常用属性: 属性 描述 decoration 设置顶部背景颜色 account

1.ListView的简单介绍 ListView是最常用的可以滚动组件之一, 它可以沿一个方向进行线性排列所有的子组件. 下面是ListView的属性值介绍: scrollDirection:列表的滚动方向, 可选值有Axis的horizontal和vertical, 默认是垂直方向上滚动. controller:控制器,与列表滚动相关,比如监听列表的滚动事件. physics: 列表滚动至边缘后继续拖动的物理效果, Android与iOS效果不同. Android会呈现出一个波纹状(对应Cla

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

51.购物车_Provide中添加商品 新加provide的cart.dart页面 引入三个文件.开始写provide类.provide需要用with 进行混入 从prefs里面获取到数据,判断有没有数据,如果有数据就返转正List<Map> 判断是否有重复的记录,如果有重复记录就数量+1,如果数据不存在就加入到tempList数组中,最后把tempList数据转成字符串,进行持久化 清空购物车的方法 清空的方法比较简单,注意这里是异步的 给两个方法最后都加上通知 provide的全局依赖 在

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

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

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

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

62.购物车_首页Provide化 让跳转随心所欲 新建provide/currentIndex.dart 内容比较简单,定义一个变量当前页面的索引currentIndex,再定义一个方法改变它的值 provide全局注册main.dart index_page.dart 引入provide和currentIndexProvide 然后把首页的代码先都注释掉,之前我们这个页面是一个StateFul的widget,现在我们要改成静态的 原来的一些代码也可以用 下面开始重写index页面 写buil

63.购物车_详细页显示购物车商品数量 购物车的图标嵌套在statck组件里面 外层套了一个stack组件 数量我们需要用Provide 返回一个container来做样式 气泡效果,中间是个数字外面 是一个圆 如果想组成一个圆的形式,内边距就必须用formLRB这种形式 点击加入购物车后,数量发生变化provide/cart.dart provide/cart.dart 效果展示: 最终代码 details_page/detail.dart import 'package:flutter/ma

66.会员中心_编写ListTile通用方法 布局List里面嵌套一个ListTile的布局效果 里面有很多条记录,以后可能还会增加,所以这里我们做一个通用的组件 通用组件方法 这里使用Column布局 调用总的方法 效果展示 最终代码: import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; class MemberPage extends Stat

根据json数据生成模型类 {"goodsId":"2171c20d77c340729d5d7ebc2039c08d","goodsName":"五粮液52°500ml","count":1,"price":830.0,"images":"http://images.baixingliangfan.cn/shopGoodsImg/20181229/20181

新加provide的cart.dart页面 引入三个文件.开始写provide类.provide需要用with 进行混入 从prefs里面获取到数据,判断有没有数据,如果有数据就返转正List<Map> 判断是否有重复的记录,如果有重复记录就数量+1,如果数据不存在就加入到tempList数组中,最后把tempList数据转成字符串,进行持久化 清空购物车的方法 清空的方法比较简单,注意这里是异步的 给两个方法最后都加上通知 provide的全局依赖 在main.dart中 details_b