flutter Column嵌套GridView或者ListView的问题

每次回头从头学习flutter的时候,都会遇到这种问题,在Column嵌套GridView或者ListView的时候,会报Vertical viewport was given unbounded height.没有指定高度的问题。


image.png

有一种解决办法是

shrinkWrap: true

如下:

      GridView.extent(
          shrinkWrap: true,
          maxCrossAxisExtent: 100,
          mainAxisSpacing: 10,
          crossAxisSpacing: 10,
          children: List.generate(
            5,
            (index) => Image.network(imageList[Random().nextInt(3)]),
          ),
      ),
      ListView.builder(
          shrinkWrap: true,
          itemCount: 5,
          itemBuilder: (context, index) {
            return Text("这是第$index个");
          },
      )

我网上百度的好多人说使用Expanded解决,然后我尝试了下,给GridView1和GridView2都设置Expanded,发现GridView1下面有很多空白啊.

后来发现原来Expanded默认指定flex:1,这几乎相当于这两个GridView把剩下的空间平分了。

这个如果在实际应用中我是不是还得指定比如给GridView1的flex为1,GridView2的flex设置为2或者3啊,这和我直接指定GridView1的高度有什么区别呢,实际项目开发中很可能上面的GridView1是自动高度填充,然后需要自己在换算高度吗,所以肯定不能用Expanded。
下图就是两个GridView都设置了Expanded,导致第一个GridView下面有空白。


image.png

然后还有个说用CustomScrollView,这个我大概看了看,有点麻烦....而且项目如果一开始没有使用CustomScrollView的话,后期改会更麻烦好像,就没用。

最后翻了翻之前写的demo项目,发现直接使用shrinkWrap: true属性就可以了。

shrinkWrap:通常 ListView(GridView,PageView,CustomScrollView)都会尽可能的填充满 parent 组件给的空间大小,而 。如果滚动视图设置的是false,那么内容会在滚动方向上尺寸延伸到最大,如果在滚动方向上没有边界约束,那么shrinkWrap必须设置为true

PS:对于新手而言,如果要想追求性能的话,还是建议看看CustomScrollView,因为内部使用的都是sliver(薄片)组件,只有当 Sliver 出现在视口中时才会去构建它。

2023年3月21日13:52:58补充:
后发现,如果在children特别少的时候,假如有2个,并且每行只有两个的时候,child在列表中所占大小宽高是一致的。
这样即便在设置了shrinkWrap也不起作用,这时候需要设置下宽高比:childAspectRatio(),如果每个child的宽高是一致的,则可以设置图片高度/宽度即可,如果不一致。。。。还没测试过。。。

...
Image.asset(imageItem,width: 162,height: 64,);
...
gridDelegate:SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2,
            crossAxisSpacing: 10,
            childAspectRatio: 162/64
);

你可能感兴趣的:(flutter Column嵌套GridView或者ListView的问题)