26.列表页_使用Provide控制子类-2

主要实现功能,点击一级分类,二级分类跟着变。这里主要用哦我们的provide

新建provide

provide文件夹下创建:child_category.dart

事件上就是这个实体:BxMallSubDto

这样我们的Provide类就写完了。

然后在main.dart中注册provide

import './provide/child_category.dart';

继续category_page.dart

先引入我们的provide和childCategory的provide

import 'package:provide/provide.dart';
import '../provide/child_category.dart';

给左侧的类别加事件

左侧每个元素的点击事件

右侧的小分类

移动过来以后呢,这里就报错了,因为我们的list已经注释带掉了不用了。

效果展示

点击左侧大类会显示右侧的小类别

增加点击的左侧大类,高亮效果

我们用setState去解决这个问题

最终展示效果

最终代码

provide/child_category.dart

import 'package:flutter/material.dart';
import '../model/category.dart'; class ChildCategory with ChangeNotifier{
List<BxMallSubDto> childCategoryList=[]; getChildCategory(List list)
{
childCategoryList=list;
notifyListeners();//监听
}
}

lib/main.dart

import 'package:flutter/material.dart';
import './pages/index_page.dart';
import 'package:provide/provide.dart';
import './provide/counter.dart';
import './provide/child_category.dart'; void main(){
var counter=Counter();
var providers=Providers();
var childCategory=ChildCategory();
//注册 依赖
providers
..provide(Provider<Counter>.value(counter))
..provide(Provider<ChildCategory>.value(childCategory));
runApp(ProviderNode(child: MyApp(),providers: providers,));
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child:MaterialApp(
title:'百姓生活+',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primaryColor: Colors.pink
),
home: IndexPage(),
)
);
}
}
import 'package:flutter/material.dart';
import '../service/service_method.dart';
import 'dart:convert';
import '../model/category.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provide/provide.dart';
import '../provide/child_category.dart'; class CategoryPage extends StatefulWidget {
@override
_CategoryPageState createState() => _CategoryPageState();
} class _CategoryPageState extends State<CategoryPage> {
@override
Widget build(BuildContext context) {
//_getCategory();
return Scaffold(
appBar: AppBar(title: Text('商品分类'),),
body: Container(
child: Row(
children: <Widget>[
LeftCategoryNav(),
Column(
children: <Widget>[
RightCategoryNav()
],
)
],
),
),
);
} } //左侧大类导航
class LeftCategoryNav extends StatefulWidget {
@override
_LeftCategoryNavState createState() => _LeftCategoryNavState();
} class _LeftCategoryNavState extends State<LeftCategoryNav> {
List list=[];
var listIndex=;
@override
void initState() {
super.initState();
_getCategory();//请求接口的数据
}
@override
Widget build(BuildContext context) {
return Container(
width: ScreenUtil().setWidth(),
decoration: BoxDecoration(
border: Border(
right: BorderSide(width:1.0,color: Colors.black12),//有边框
)
),
child: ListView.builder(
itemCount: list.length,
itemBuilder: (contex,index){
return _leftInkWell(index);
},
),
);
} Widget _leftInkWell(int index){
bool isClick=false;
isClick=(index==listIndex)?true:false;
return InkWell(
onTap: (){
setState(() {
listIndex=index;
});
var childList=list[index].bxMallSubDto;//当前大类的子类的列表
Provide.value<ChildCategory>(context).getChildCategory(childList);
},
child: Container(
height: ScreenUtil().setHeight(),
padding: EdgeInsets.only(left:10.0,top:10.0),
decoration: BoxDecoration(
color: isClick?Colors.black26: Colors.white,
border: Border(
bottom: BorderSide(width: 1.0,color: Colors.black12)
)
),
child: Text(
list[index].mallCategoryName,
style: TextStyle(fontSize: ScreenUtil().setSp()),//设置字体大小,为了兼容使用setSp
),
),
);
}
void _getCategory() async{
await request('getCategory').then((val){
var data=json.decode(val.toString());
//print(data);
CategoryModel category= CategoryModel.fromJson(data);
setState(() {
list=category.data;
});
//list.data.forEach((item)=>print(item.mallCategoryName));
});
}
} class RightCategoryNav extends StatefulWidget {
@override
_RightCategoryNavState createState() => _RightCategoryNavState();
} class _RightCategoryNavState extends State<RightCategoryNav> {
//List list = ['名酒','宝丰','北京二锅头','舍得','五粮液','茅台','散白'];
@override
Widget build(BuildContext context) {
return Provide<ChildCategory>(
builder: (context,child,childCategory){
return Container(
height: ScreenUtil().setHeight(),
width: ScreenUtil().setWidth(),//总的宽度是750 -180
decoration: BoxDecoration(
color: Colors.white,//白色背景
border: Border(
bottom: BorderSide(width: 1.0,color: Colors.black12)//边界线
)
),
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: childCategory.childCategoryList.length,
itemBuilder: (context,index){
return _rightInkWell(childCategory.childCategoryList[index]);
},
),
);
}
);
} Widget _rightInkWell(BxMallSubDto item){
return InkWell(
onTap: (){},//事件留空
child: Container(//什么都加一个container,这样好布局
padding: EdgeInsets.fromLTRB(5.0, 10.0, 5.0, 10.0),//上下是10 左右是5.0
child: Text(
item.mallSubName,
style:TextStyle(fontSize: ScreenUtil().setSp()),
),
),
);
}
}

category_page.dart

Flutter实战视频-移动电商-26.列表页_使用Provide控制子类-2的更多相关文章

  1. Flutter实战视频-移动电商-25.列表页_使用Provide控制子类-1

    25.列表页_使用Provide控制子类-1 主要是二级分类的UI布局 1分15秒 生成我们的右侧动态类 定义list变量 开始写里面的子项,把每一个小的写了 再拼成一个大的 这样我们的小类就写完了 ...

  2. Flutter实战视频-移动电商-34.列表页_小BUG的修复

    34.列表页_小BUG的修复 当高粱酒的子类没有数据返回的时候就会报错. 解决接口空数据报错的问题 没有数据的时候,给用户一个友好的提示, 我们没有数据的时候还要告诉用户,提示一下他没有数据,在我们的 ...

  3. Flutter实战视频-移动电商-27.列表页_现有Bug修复和完善

    27.列表页_现有Bug修复和完善 小解决小bug 默认右侧的小类没有被加载 数据加载完成后,就list的第一个子对象传递给provide进行赋值,这样右侧的小类就刷新了数据 默认加载了第一个类别 调 ...

  4. Flutter实战视频-移动电商-28.列表页_商品列表后台接口调试

    28.列表页_商品列表后台接口调试 主要调试商品列表页的接口 这个接口是最难的因为有大类.小类还有上拉加载 先配置接口 config/service_url.dart //const serviceU ...

  5. Flutter实战视频-移动电商-30.列表页_商品列表UI界面布局

    30.列表页_商品列表UI界面布局 小程序里面的布局方式 小程序的图片上这里使用的是warp布局,因为首页里面火爆专区,已经用过了warp来布局了. 所以这里我们没有必要再讲一遍,这里我们使用List ...

  6. Flutter实战视频-移动电商-31.列表页_列表切换交互制作

    31.列表页_列表切换交互制作 博客地址:https://jspang.com/post/FlutterShop.html#toc-c42 点击左侧的大类右边的小类也跟着变化 新建provide 要改 ...

  7. Flutter实战视频-移动电商-32.列表页_小类高亮交互效果制作

    32.列表页_小类高亮交互效果制作 点击大类右侧的横向的小类红色显示当前的小类别 解决之前溢出的问题: 先解决一个bug,之前右侧的这里设置的高度是1000,但是有不同的虚拟机和手机设别的问题造成了溢 ...

  8. Flutter实战视频-移动电商-33.列表页_子类和商品列表交互效果

    33.列表页_子类和商品列表交互效果 主要实现点击小类下面的列表跟着切换 获取右侧下面的列表信息,即要传递大类的id也要传递小类的,所以需要把左侧的大类的id也要Provide化 可以看下网站上的接口 ...

  9. Flutter实战视频-移动电商-35.列表页_上拉加载更多制作

    35.列表页_上拉加载更多制作 右侧列表上拉加载配合类别的切换 上拉加载需要一个page参数,当点击大类或者小类的时候,这个page就要变成1 provide内定义参数 首先我们需要定义一个page的 ...

随机推荐

  1. vim 宏的使用

    1. 基本使用 q[a-z] 开始录制宏 q  停止录制 @[a-z] 使用宏 @@ 调用最近使用的宏 22@[a-z] 多次重放宏 2. 宏的执行方式 串行方式:5@[a-z] 宏内包含向下一个目标 ...

  2. laravel 配置了自己的域名以后, localhost 无法访问 404 not found 的解决方法

    这是后盾网视频教程的方法,应该是配置虚拟主机,此方法要改动,apache服务器里的conf文件夹里的httpd.conf文件 和conf/extral里面的httpd-vhost文件 具体改动为,co ...

  3. Django-celery分布式任务

    昨天一个很好的面试官问我你在python中怎么实现定时任务呢?我没回答好,我问了下原来有个叫celery的东西,感觉挺好用的 Celery 是一个 基于python开发的分布式异步消息任务队列,通过它 ...

  4. git学习(4)---工作流

    一.目的 前三章介绍了git工具本身的操作,主要包含本地仓库操作和远程库操作两部分内容.接下来,我们将介绍怎样使用git进行项目开发,也叫做git工作流. git工作流分为三种模式:共享远程库模式.独 ...

  5. 5分钟部署filebeat + ELK 5.1.1

    标题有点噱头,不过网络环境好的情况下也差不多了^_^   1. 首先保证安装了jdk.   elasticsearch, logstash, kibana,filebeat都可以通过yum安装,这里前 ...

  6. 使用kubernetes 官网工具kubeadm部署kubernetes(使用阿里云镜像)

    系列目录 kubernetes简介 Kubernetes节点架构图: kubernetes组件架构图: 准备基础环境 我们将使用kubeadm部署3个节点的 Kubernetes Cluster,整体 ...

  7. KVM技术

    今天是周六,看到一片KVM相关的文章,感觉写得很不错,翻译了,原文在这里:KVM Technology 在开放服务器虚拟化的应用方面,KVM虚拟化技术近年来广受关注.自从2006年10月份诞生以来,其 ...

  8. 如何将mysql的路径加入环境变量

    1.打开终端,输入: cd ~ 会进入~文件夹 2.然后输入:touch .bash_profile 回车执行后, 2.再输入:open -e .bash_profile 会在TextEdit中打开这 ...

  9. 01 json方式封装通信接口

    新建一个json_api.php<?php class Response{ /** *按json方式输出通信 *@param integet $code 状态码 *@param string $ ...

  10. sanic官方文档解析之Example(二)

    1,通过docker部署sanic项目 通过Docker和Docker Compose部署SANIC应用程序是一项很容易实现的任务,下面的示例提供了示例simple_server.py的部署 FROM ...