flutter Column嵌套GridView或者ListVi
每次回头从头学习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 出现在视口中时才会去构建它。