Flutter移动电商实战 --(21)分类页_类别信息接口调试
先解决一个坑
取消上面的GridVIew的回弹效果。就是在拖这个gridview的时候有一个滚动的效果

physics: NeverScrollableScrollPhysics(),

大R刷新后,点击这里的空白的地方,GridView就不会有滚动的效果了。

分类页面后端接口调试
service_url.dart配置接口的地址和名称

const serviceUrl='http://test.baixingliangfan.cn/baixing/';
const servicePath={
'homePageContent':serviceUrl+'wxmini/homePageContent',//商店首页信息
'homePageBelowConten':serviceUrl+'wxmini/homePageBelowConten',//商城首页热卖商品
'getCategory':serviceUrl+'wxmini/getCategory',//商品类别信息
};
pages/category_page.dart

引入数据访问类和dart自带的转换json的

这里的代码删除掉,我们把类修改成一个动态的widget

class CategoryPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(child: Text('分类页面'),),
);
}
}
stfu快速生成动态的widget


效果展示
flutter的缺点就是加载首页的时候把其他接个页面的数据也加载了。很多人论坛提这个问题,目前还没有解决

最终代码:
import 'package:flutter/material.dart';
import '../service/service_method.dart';
import 'dart:convert'; class CategoryPage extends StatefulWidget {
@override
_CategoryPageState createState() => _CategoryPageState();
} class _CategoryPageState extends State<CategoryPage> {
@override
Widget build(BuildContext context) {
_getCategory();
return Container(
child:Center(
child: Text('分类页面'),
)
);
} void _getCategory() async{
await request('getCategory').then((val){
var data=json.decode(val.toString());
print(data);
});
}
}
.
Flutter移动电商实战 --(21)分类页_类别信息接口调试的更多相关文章
- Flutter实战视频-移动电商-21.分类页_类别信息接口调试
21.分类页_类别信息接口调试 先解决一个坑 取消上面的GridVIew的回弹效果.就是在拖这个gridview的时候有一个滚动的效果 physics: NeverScrollableScrollPh ...
- Flutter移动电商实战 --(28)列表页_商品列表后台接口调试
主要调试商品列表页的接口 这个接口是最难的因为有大类.小类还有上拉加载 先配置接口 config/service_url.dart //const serviceUrl='http://test.ba ...
- Flutter移动电商实战 --(40)路由_Fluro的全局注入和使用方法
路由注册到顶层,使每个页面都可以使用,注册到顶层就需要在main.dart中 main.dart注册路由 注入 onGenerateRoute是MaterialApp自带的路由配置项, 首页跳转到详细 ...
- Flutter移动电商实战 --(23)分类页_左侧类别导航制作
自动生成dart类 https://javiercbk.github.io/json_to_dart/ 生成的代码 class Autogenerated { String code; String ...
- Flutter移动电商实战 --(49)详细页_Stack制作底部工具栏
一直悬浮在最下面的 Stack层叠组件.里面用Row 可以横向布局 开始 stack如果想定位就要用position去定位. 修改return返回值的这个地方 大R刷新查看效果,可以看到固定的在左下角 ...
- Flutter移动电商实战 --(48)详细页_详情和评论的切换
增加切换的效果,我们主要是修改这个地方 这样我们的评论的内容就显示出来了 最终代码 details_web.dart import 'package:flutter/material.dart'; i ...
- Flutter移动电商实战 --(47)详细页_Flutter_html插件的使用
详情里面是hemlt和图片组成的,但是flutter是不支持html的所以需要其他插件 flutter webview plugin:这个不太好用 flutter_html:用这个插件 先解决之前一个 ...
- Flutter移动电商实战 --(46)详细页_自定义TabBar Widget
主要实现详情和评论的tab provide定义变量 自己做一个tab然后用provide去控制 定义两个变量来判断是左侧选中了还是右侧选中了.并定义一个方法来接受参数,修改是左侧还是右侧选中的状态值 ...
- Flutter移动电商实战 --(45)详细页_说明区域UI编写
pages/details_page/details_expain.dart 详情页面引用组件 效果展示: 最终代码: import 'package:flutter/material.dart'; ...
随机推荐
- day12-python之深灰魔法
#######################################灰魔法: list类中提供的方法 列表####################################### ...
- 1.Java集合-HashMap实现原理及源码分析
哈希表(Hash Table)也叫散列表,是一种非常重要的数据结构,应用场景及其丰富,许多缓存技术(比如memcached)的核心其实就是在内存中维护一张大的哈希表,而HashMap的实现原理也常常 ...
- hadoop相关随记
1.用来查询集群上启动的job,并杀掉DumpTrack状态的job: yarn application -list|grep DumpTrack|awk '{print $1}' | xargs y ...
- assert函数应用
目录 1 assert概念 2 assert作用 3 assert用法 3.1 检测调用者传过来的指针参数是否正常 3.2 判断某个变量的范围 3.3 assert只检验一个地方 3.4 不能使用改变 ...
- centos7误删yum源的解决办法 ( -bash: yum: command not found)
这里以安装阿里的yum源为例: 1.查看自己的centos版本 cat /etc/redhat-release 2.进入阿里云源站地址:http://mirrors.aliyun.com/centos ...
- How to resolve the 403 error when send POST request from Postman
Root cause: the site refused the connection from the http request origin, by default it is setted as ...
- vue3.0脚手架 创建项目
1.下载node最新稳定版本,并且安装 2.安装好之后,在cmd或者terminal下, 使用npm -v 查看当前npm版本,验证是否安装成功 3.安装成功后,运行 npm i -g @vue/cl ...
- 洛谷P1341 无序字母对【欧拉路】【dfs】
题目:https://www.luogu.org/problemnew/show/P1341 题意:给定n对字母对,要求构造一个个数为n+1的字符串,使得每一个字母对都在里面出现过. 思路:这种题目都 ...
- vue 想关工具 及组件
vue-cli vue的脚手架工具 (1) 安装通过 npm install -g vue-cil (2)常用模板 browserify - 拥有高级功能的 Browserify ...
- JavaScript里的递增"++"和递减"--"
递增"++",表示在原来的数值上+1 tips:比如a=1,那么++a或者a++都等于2. 递减"--",表示再原来的数值上-1,前置/后置递减计算过程同递增 ...