flutter Column嵌套GridView或者ListVi

2023-03-07  本文已影响0人  CreScert

每次回头从头学习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 出现在视口中时才会去构建它。

上一篇下一篇

猜你喜欢

热点阅读