65.会员中心_订单区域UI布局 我的订单区域 member.dart写我的标题的方法 布局使用瓦片布局 先做修饰,decoration颜色的背景,下边线的样式 //我的订单标题 Widget _orderTitle(){ return Container( margin: EdgeInsets.only(top: ), decoration: BoxDecoration( color: Colors.white, border: Border( bottom: BorderSide(width…
64.会员中心_顶部头像UI布局 会员中心的样式 member.dart 清除原来的代码生成一个基本的结构 默认返回一个scaffold脚手架工具,body里面布局使用ListView,这样不会出现纵向的溢出 这样就是一个基本的结构 头部的布局 这里的背景颜色是一个图片.这里我们先不用图片,先使用亮粉色,找图片比较麻烦 头像从网上随便找一个图片当头像就可以了 http://blogimages.jspang.com/blogtouxiang1.jpg 效果预览 最终代码 import 'pack…
66.会员中心_编写ListTile通用方法 布局List里面嵌套一个ListTile的布局效果 里面有很多条记录,以后可能还会增加,所以这里我们做一个通用的组件 通用组件方法 这里使用Column布局 调用总的方法 效果展示 最终代码: import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; class MemberPage extends Stat…
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…
30.列表页_商品列表UI界面布局 小程序里面的布局方式 小程序的图片上这里使用的是warp布局,因为首页里面火爆专区,已经用过了warp来布局了. 所以这里我们没有必要再讲一遍,这里我们使用ListView,我们把它布局成下图这种形式: 我们拆的散一点,用内部方法的形式,我们把图片和名称分别拆成单独的方法去实现,然后在组合成一个子项赋值给ListView 开始写内部方法 图片widget 如果图片很大的话,我们需要设定一个限制,这个时候就体现出来这个外层套一个Container的好处.很容易给…
25.列表页_使用Provide控制子类-1 主要是二级分类的UI布局 1分15秒 生成我们的右侧动态类 定义list变量 开始写里面的子项,把每一个小的写了 再拼成一个大的 这样我们的小类就写完了 开始写我的大类别:是一个横向的ListView.写横向的ListView就必须设置宽和高 ListView如果是纵向的不需要设置高度,如果是横向的就必须设置宽和高 这里使用构造器的形式,动态构造.ListView.builder() 大类的代码: 调用我们的大类 布局的划分:最外层用Row,右侧用上…
34.列表页_小BUG的修复 当高粱酒的子类没有数据返回的时候就会报错. 解决接口空数据报错的问题 没有数据的时候,给用户一个友好的提示, 我们没有数据的时候还要告诉用户,提示一下他没有数据,在我们的右侧列表的build方法内去判断 友好提示展示效果: 子类的id状态化 状态管理里面,定义小类的变量,并根据传入的id根性赋值.这样我们在点击小类的时候,需要也传入小类的id 这样我们在小类点击事件里面,传入小类的id就可以了 测试程序 点击小类进行测试 最终代码: provide/child_ca…
05.Dio基础_引入和简单的Get请求 博客地址: https://jspang.com/post/FlutterShop.html#toc-4c7 第三方的http请求库叫做Dio https://github.com/flutterchina/dio pubspec.yaml 这两者的区别: dependencies是生产环境中 dev_dependencies:开发环境,上线的是时候不会被打包进去. 添加我们的Dio 这样就表示下载好了 在我们的首页去发送一个请求. home_page.…
08.Dio基础_伪造请求头获取数据 上节课代码清楚 重新编写HomePage这个动态组件 开始写请求的方法 请求数据 .但是由于我们没加请求的头 所以没有返回数据 451就是表示请求错错误 创建请求头 注意这里是Request Headers这块才是请求头 把请求头全部复制过来. 然后给这些数据 都加上单引号,做成mapper的形式. 在VScode里面按住鼠标的alt键就可以多选 把这些字母的最前面和最后面都加上光标,然后鼠标再输入单引号 这样单引号就都加上了. 把这些参数都放在了单引号里面…
21.分类页_类别信息接口调试 先解决一个坑 取消上面的GridVIew的回弹效果.就是在拖这个gridview的时候有一个滚动的效果 physics: NeverScrollableScrollPhysics(), 大R刷新后,点击这里的空白的地方,GridView就不会有滚动的效果了. 分类页面后端接口调试 service_url.dart配置接口的地址和名称 const serviceUrl='http://test.baixingliangfan.cn/baixing/'; const…