如果做这个筛选界面的时候,刚开始最外层用Column嵌套一个Container(红色部分)和ListView。
然后每个Item也是Column嵌套一个Container(大分类)
和GridView(小分类) 。出现的问题就是不能滚动。
解决办法
在Listview和GridView外面嵌套一个Expanded,不能滚动是因为Container尺寸计算的问题,Expande就是listview有多大就有多大。
主要代码
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.only(left: 17),
color: Colors.white,
height: ScreenAdaper.screenHeight(),
width: ScreenAdaper.screenWidth() -ScreenAdaper.width2px(70),
child: Column(
children: [
Expanded(child: _getListView()),
_getBottomWidget(),
],
),
);
}
Widget _getListView(){
return Padding(
padding: EdgeInsets.only(top: ScreenAdaper.height2px(20)),
child: ListView.builder(
physics: const AlwaysScrollableScrollPhysics(),
itemBuilder: (context, index) {
return SearchFilterItem(
data: widget.state.categoryList[index],
);
},
itemCount: widget.state.categoryList.length,
),
);
}
Item嵌套
@override
Widget build(BuildContext context) {
return Container(
height: fold == false ?44:44+_getViewHeight(),
child: Column(
children: [
_headWidget(),
_gridView(),
],
),
);
}
Widget _gridView(){
return Expanded(
child: GridView.builder(
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.vertical, // 水平滚动
controller: scrollController,
padding: EdgeInsets.only(left:5.0,top: 5,right: 5),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3, //每行显示3列
childAspectRatio: 69/24, //显示区域宽高相等
mainAxisSpacing: 6.0,//每行的间距
crossAxisSpacing: 6.0, //每列的间距
),
itemCount: widget.data.subjectDtos.length,
itemBuilder: (context, index) {
return SearchFilterLabel(
data: widget.data.subjectDtos[index],
);
}),
);
}