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 组件给的空间大小，而 $\color{red}{shrinkWrap: true则是只满足自身大小}$ 。如果滚动视图设置的是false,那么内容会在滚动方向上尺寸延伸到最大，如果在滚动方向上没有边界约束，那么shrinkWrap必须设置为true

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

2023年3月21日13:52:58补充：
后发现，如果在children特别少的时候，假如有2个，并且每行只有两个的时候，child在列表中所占大小宽高是一致的。
这样即便在设置了shrinkWrap也不起作用，这时候需要设置下宽高比：childAspectRatio（ $\color{red}{childAspectRatio是设置每个子元素的宽高比例，使用需谨慎}$ ），如果每个child的宽高是一致的，则可以设置图片高度/宽度即可，如果不一致。。。。还没测试过。。。

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

最后编辑于：2023.03.21 14:08:42