27.列表页_现有Bug修复和完善

小解决小bug

默认右侧的小类没有被加载

数据加载完成后,就list的第一个子对象传递给provide进行赋值,这样右侧的小类就刷新了数据

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

默认加载了第一个类别

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

调整颜色

对比图片调整下颜色

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

这里的参数r:就是red红色

g:green绿色

b:blue蓝色

opacity:就是透明度

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

最终修改成颜色:

Color.fromRGBO(, , , 1.0)

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

全部

点击类别的时候默认有一个全部,我们的数据里面默认是没有这个全部的。这就需要我们自己把这个子类加上

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

我们在Provide的类里面去实现。先声明一个BxMallSubDto的实体,然后字段都赋值,加入到childCategoryList里面。

最后childCategoryList再把传递过来的list也加上值

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

这样我们的全部的效果就出来了。

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

最终代码:

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?Color.fromRGBO(, , , 1.0): 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;
});
Provide.value<ChildCategory>(context).getChildCategory(list[].bxMallSubDto);
});
}
} 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

provide/child_category.dart

import 'package:flutter/material.dart';
import '../model/category.dart'; class ChildCategory with ChangeNotifier{
List<BxMallSubDto> childCategoryList=[]; getChildCategory(List<BxMallSubDto> list){
BxMallSubDto all=BxMallSubDto();
all.mallCategoryId="";
all.mallCategoryId="";
all.comments="null";
all.mallSubName='全部';
childCategoryList=[all];
//childCategoryList=list;
childCategoryList.addAll(list);
notifyListeners();//监听
}
}
05-11 11:35