自动生成dart类 https://javiercbk.github.io/json_to_dart/ 生成的代码 class Autogenerated { String code; String message; List<Data> data; Autogenerated({this.code, this.message, this.data}); Autogenerated.fromJson(Map<String, dynamic> json) { code = json[

pages下面新建: ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; import '../config/Config.dart'; import 'package:dio/dio.dart'; class ProductListPage extends StatefulWidget { Map arguments; ProductListPage({

Flutter实战(交流群:452892873) 本项目是一个实战项目,根据目录建文件,并复制从第一节到最新更新的文章,可以构成完整的一个请求后台数据的项目: CateModel.dart class CateModel { List<CateItemModel> result; CateModel({this.result}); CateModel.fromJson(Map<String, dynamic> json) { if (json['result'] != null)

34.列表页_小BUG的修复 当高粱酒的子类没有数据返回的时候就会报错. 解决接口空数据报错的问题 没有数据的时候,给用户一个友好的提示, 我们没有数据的时候还要告诉用户,提示一下他没有数据,在我们的右侧列表的build方法内去判断 友好提示展示效果: 子类的id状态化 状态管理里面,定义小类的变量,并根据传入的id根性赋值.这样我们在点击小类的时候,需要也传入小类的id 这样我们在小类点击事件里面,传入小类的id就可以了 测试程序 点击小类进行测试 最终代码: provide/child_ca

25.列表页_使用Provide控制子类-1 主要是二级分类的UI布局 1分15秒 生成我们的右侧动态类 定义list变量 开始写里面的子项,把每一个小的写了 再拼成一个大的 这样我们的小类就写完了 开始写我的大类别:是一个横向的ListView.写横向的ListView就必须设置宽和高 ListView如果是纵向的不需要设置高度,如果是横向的就必须设置宽和高 这里使用构造器的形式,动态构造.ListView.builder() 大类的代码: 调用我们的大类 布局的划分:最外层用Row,右侧用上

26.列表页_使用Provide控制子类-2 主要实现功能,点击一级分类,二级分类跟着变.这里主要用哦我们的provide 新建provide provide文件夹下创建:child_category.dart 事件上就是这个实体:BxMallSubDto 这样我们的Provide类就写完了. 然后在main.dart中注册provide import './provide/child_category.dart'; 继续category_page.dart 先引入我们的provide和chil

27.列表页_现有Bug修复和完善 小解决小bug 默认右侧的小类没有被加载 数据加载完成后,就list的第一个子对象传递给provide进行赋值,这样右侧的小类就刷新了数据 默认加载了第一个类别 调整颜色 对比图片调整下颜色 这里的参数r:就是red红色 g:green绿色 b:blue蓝色 opacity:就是透明度 最终修改成颜色: Color.fromRGBO(, , , 1.0) 全部 点击类别的时候默认有一个全部,我们的数据里面默认是没有这个全部的.这就需要我们自己把这个子类加上 我

28.列表页_商品列表后台接口调试 主要调试商品列表页的接口 这个接口是最难的因为有大类.小类还有上拉加载 先配置接口 config/service_url.dart //const serviceUrl='http://test.baixingliangfan.cn/baixing/';//2019-04-12失效 const serviceUrl='https://wxmini.baixingliangfan.cn/baixing/';//从群里那个github的地址找到的 const se

31.列表页_列表切换交互制作 博客地址:https://jspang.com/post/FlutterShop.html#toc-c42 点击左侧的大类右边的小类也跟着变化 新建provide 要改变哪里就建哪里的provide,我们现在要改变的是右边的商品列表的数组. category_goods_list.dart 这样我们的provide类就做好了 做好的provide类放到main.dart中注册 这一步叫做 把状态放入顶层 category_page.dart修改 _getGoods

32.列表页_小类高亮交互效果制作 点击大类右侧的横向的小类红色显示当前的小类别 解决之前溢出的问题: 先解决一个bug,之前右侧的这里设置的高度是1000,但是有不同的虚拟机和手机设别的问题造成了溢出的问题. Expaned是有伸缩能力的小部件,继承于Flexible 外层套一个Expanded,内部的Contaienr的高度不再设置 右侧列表没有设置高度一样显示出来了. provide的修改 使用provide来交互,左侧大类是一个,右侧上面横向的小类是一个,两个类之间交互使用provide

33.列表页_子类和商品列表交互效果 主要实现点击小类下面的列表跟着切换 获取右侧下面的列表信息,即要传递大类的id也要传递小类的,所以需要把左侧的大类的id也要Provide化 可以看下网站上的接口说明: https://jspang.com/posts/2019/03/01/flutter-shop.html#%E5%90%8E%E7%AB%AF%E6%8E%A5%E5%8F%A3api%E6%96%87%E6%A1%A3 大类id Provide化 当我们点击左侧的大类的时候,要把当前的大

35.列表页_上拉加载更多制作 右侧列表上拉加载配合类别的切换 上拉加载需要一个page参数,当点击大类或者小类的时候,这个page就要变成1 provide内定义参数 首先我们需要定义一个page的变量 下图是我们之前在首页的时候做的上拉加载代码,之前属性noMoreText我们没有设置值,这里我也需要把这个属性加入到provide里面去. 在大类和小类的初始化的方法内,都需要把page设置为1,然后把提示信息设置为空 然后我们需要做page增加的方法,上拉刷新的时候,这个page值是不断的增

其实转换成model类是有好处的,转换后可以减少上线后APP崩溃和出现异常,所以我们从这节课开始,要制作model类模型,然后用model的形式编辑UI界面. 类别json的分析 比如现在从后台得到了一串JSON数据: { "code": "0", "message": "success", "data": [{ "mallCategoryId": "4", &quo

右侧列表上拉加载配合类别的切换 上拉加载需要一个page参数,当点击大类或者小类的时候,这个page就要变成1 provide内定义参数 首先我们需要定义一个page的变量 下图是我们之前在首页的时候做的上拉加载代码,之前属性noMoreText我们没有设置值,这里我也需要把这个属性加入到provide里面去. 在大类和小类的初始化的方法内,都需要把page设置为1,然后把提示信息设置为空 然后我们需要做page增加的方法,上拉刷新的时候,这个page值是不断的增加的 再增加改变我们的noMor

当高粱酒的子类没有数据返回的时候就会报错. 解决接口空数据报错的问题 没有数据的时候,给用户一个友好的提示, 我们没有数据的时候还要告诉用户,提示一下他没有数据,在我们的右侧列表的build方法内去判断 友好提示展示效果: 子类的id状态化 状态管理里面,定义小类的变量,并根据传入的id根性赋值.这样我们在点击小类的时候,需要也传入小类的id 这样我们在小类点击事件里面,传入小类的id就可以了 测试程序 点击小类进行测试 最终代码: provide/child_category.dart imp

主要实现点击小类下面的列表跟着切换 获取右侧下面的列表信息,即要传递大类的id也要传递小类的,所以需要把左侧的大类的id也要Provide化 可以看下网站上的接口说明: https://jspang.com/posts/2019/03/01/flutter-shop.html#%E5%90%8E%E7%AB%AF%E6%8E%A5%E5%8F%A3api%E6%96%87%E6%A1%A3 大类id Provide化 当我们点击左侧的大类的时候,要把当前的大类id存起来. category_pa

点击大类右侧的横向的小类红色显示当前的小类别 解决之前溢出的问题: 先解决一个bug,之前右侧的这里设置的高度是1000,但是有不同的虚拟机和手机设别的问题造成了溢出的问题 Expaned是有伸缩能力的小部件,继承于Flexible 外层套一个Expanded,内部的Contaienr的高度不再设置 右侧列表没有设置高度一样显示出来了. provide的修改 使用provide来交互,左侧大类是一个,右侧上面横向的小类是一个,两个类之间交互使用provide来交互 category_page.d

点击左侧的大类右边的小类也跟着变化 新建provide 要改变哪里就建哪里的provide,我们现在要改变的是右边的商品列表的数组. category_goods_list.dart 这样我们的provide类就做好了 做好的provide类放到main.dart中注册 这一步叫做 把状态放入顶层 category_page.dart修改 _getGoodsList方法整体移动到左侧的大类 我们把他移动到了这里 方法移动过来以后,我们要接受一个参数类别id,这个类别是可选的,可选的参数用{}括起

主要调试商品列表页的接口 这个接口是最难的因为有大类.小类还有上拉加载 先配置接口 config/service_url.dart //const serviceUrl='http://test.baixingliangfan.cn/baixing/';//2019-04-12失效 const serviceUrl='https://wxmini.baixingliangfan.cn/baixing/';//从群里那个github的地址找到的 const servicePath={ 'homeP

小解决小bug 默认右侧的小类没有被加载 数据加载完成后,就list的第一个子对象传递给provide进行赋值,这样右侧的小类就刷新了数据 默认加载了第一个类别 调整颜色 对比图片调整下颜色 这里的参数r:就是red红色 g:green绿色 b:blue蓝色 opacity:就是透明度 最终修改成颜色: Color.fromRGBO(236, 236, 236, 1.0) 全部 点击类别的时候默认有一个全部,我们的数据里面默认是没有这个全部的.这就需要我们自己把这个子类加上 我们在Provide

主要实现功能,点击一级分类,二级分类跟着变.这里主要用我们的provide 新建provide provide文件夹下创建:child_category.dart 事件上就是这个实体:BxMallSubDto 这样我们的Provide类就写完了. 然后在main.dart中注册provide import './provide/child_category.dart'; 继续category_page.dart 先引入我们的provide和childCategory的provide import