Flutter Column嵌套Listview不能滚动的问题

赵哥窟

发布于 2021-04-20 02:56:31

3.4K00

代码可运行

文章被收录于专栏：日常技术分享日常技术分享

运行总次数：0

代码可运行

Screenshot_1618537132.png

如果做这个筛选界面的时候，刚开始最外层用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],
            );
          }),
    );
  }