美文网首页
flutter Column嵌套GridView或者ListVi

flutter Column嵌套GridView或者ListVi

作者: CreScert | 来源:发表于2023-03-07 10:00 被阅读0次

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

    相关文章

      网友评论

          本文标题:flutter Column嵌套GridView或者ListVi

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