美文网首页
Flutter Column嵌套Listview不能滚动的问题

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

作者: 赵哥窟 | 来源:发表于2021-04-16 09:44 被阅读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],
                );
              }),
        );
      }
    

    相关文章

      网友评论

          本文标题:Flutter Column嵌套Listview不能滚动的问题

          本文链接:https://www.haomeiwen.com/subject/jrgslltx.html