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

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

30.列表页_商品列表UI界面布局 小程序里面的布局方式 小程序的图片上这里使用的是warp布局,因为首页里面火爆专区,已经用过了warp来布局了. 所以这里我们没有必要再讲一遍,这里我们使用ListView,我们把它布局成下图这种形式: 我们拆的散一点,用内部方法的形式,我们把图片和名称分别拆成单独的方法去实现,然后在组合成一个子项赋值给ListView 开始写内部方法 图片widget 如果图片很大的话,我们需要设定一个限制,这个时候就体现出来这个外层套一个Container的好处.很容易给…

小程序里面的布局方式 小程序的图片上这里使用的是warp布局,因为首页里面火爆专区,已经用过了warp来布局了. 所以这里我们没有必要再讲一遍,这里我们使用ListView,我们把它布局成下图这种形式: 我们拆的散一点,用内部方法的形式,我们把图片和名称分别拆成单独的方法去实现,然后在组合成一个子项赋值给ListView 开始写内部方法 图片widget 如果图片很大的话,我们需要设定一个限制,这个时候就体现出来这个外层套一个Container的好处.很容易给外层这个Container加上限制…

1.推荐商品类的编写 这个类接收一个List参数,就是推荐商品的列表,这个列表是可以左右滚动的. /*商品推荐*/ class Recommend extends StatelessWidget { final List recommendList; Recommend({Key key, this.recommendList}) : super(key: key); } 2.推荐标题内部方法的编写 实际开发中,要尽量减少嵌套,我们需要把复杂的组件,单独拿出一个方法进行编写.这里就把商品推荐标题…

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

45.详细页_说明区域UI编写 pages/details_page/details_expain.dart 详情页面引用组件 效果展示: 最终代码: import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; class DetailsExplain extends StatelessWidget { @override Widget build(Bui…

64.会员中心_顶部头像UI布局 会员中心的样式 member.dart 清除原来的代码生成一个基本的结构 默认返回一个scaffold脚手架工具,body里面布局使用ListView,这样不会出现纵向的溢出 这样就是一个基本的结构 头部的布局 这里的背景颜色是一个图片.这里我们先不用图片,先使用亮粉色,找图片比较麻烦 头像从网上随便找一个图片当头像就可以了 http://blogimages.jspang.com/blogtouxiang1.jpg 效果预览 最终代码 import 'pack…

65.会员中心_订单区域UI布局 我的订单区域 member.dart写我的标题的方法 布局使用瓦片布局 先做修饰,decoration颜色的背景,下边线的样式 //我的订单标题 Widget _orderTitle(){ return Container( margin: EdgeInsets.only(top: ), decoration: BoxDecoration( color: Colors.white, border: Border( bottom: BorderSide(width…

首页轮播点击到详细页 修改我们轮播这里的代码:SwiperDiy这个类这里的代码 return InkWell( onTap: (){ Application.router.navigateTo(context, '/detail?id=${swiperDateList[index]['goodsId']}'); }, child: Image.network("${swiperDateList[index]['image']}",fit: BoxFit.fill,), ); 展示效果…