Flutter 设置Container高度自适应GridView

在做移动端的时候, 很多时候会需要下图所示的需求,如图 自己所示：

先进行需求分析, 这个模块可以设计成Container包含GridView,  GridView中子内容个数由后台数据控制, 但是在直接写Container包含GridView控件时会出现 "Failed assertion: line 1920 pos 12: 'hasSize'" 有关的错误, 如果直接给Container一个高度的话, 又不满足我们的需求.

我们想要的结果是由数据控制GridView的个数, 而Container大小跟随GridView个数的变化而变化, 而不去直接设置Container的大小, 

因此,我们点开GridView的api发现, 有一个shrinkWrap属性,  设置shrinkWrap:true即可, 运行一下即可达到效果, 但是又会发现另一个问题, 虽然Container大小可以自适应了, 但是里面的内容又会在局部进行滚动, 而我们的想法是想让内容在整个屏幕中滚动, 并没有局部滚动的效果, 因此, 我们设置另一个属性physics: NeverScrollableScrollPhysics()

总结：

在GridView.builder中添加

Container跟随GridView内容变化高度： shrinkWrap:true,    

取消滚动效果： physics:NeverScrollableScrollPhysics(),

_morePicContiner() {

return Container(

    padding:EdgeInsets.all(10),

    color: Colors.black12,

    child:GridView.builder(

        ///Container跟随GridView内容变化高度, shrinkWrap:true;

        shrinkWrap:true,

        ///取消滚动效果physics: NeverScrollableScrollPhysics();

        physics:NeverScrollableScrollPhysics(),

        itemCount:list.length,

        ///SliverGridDelegateWithFixedCrossAxisCount 构建一个横轴固定数量Widget

        gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(

            ///横轴元素个数

            crossAxisCount:3,

            ///纵轴间距

            mainAxisSpacing:5,

            ///横轴间距

            crossAxisSpacing:5,

            ///子组件宽高长度比例

            // childAspectRatio: 1.0

        ),

        itemBuilder: (BuildContext context, int position) {

            return __createGridViewItems(position);  //布局样式自己定义

        }

    ),

  );

}