Flutter：StaggeredGridView内嵌Stack的用法及图片尺寸异常问题

嘿，我懂你遇到的这个糟心问题——在StaggeredGridView里套个Stack，图片尺寸就变得奇奇怪怪，去掉Stack又一切正常，这其实是Stack的布局特性在搞怪！

问题根源 #

Stack组件默认的fit属性是StackFit.loose，简单说就是它不会强制子组件适配父容器的尺寸约束，子组件可以自顾自地按自身大小渲染。但StaggeredGridView的每个StaggeredTile是有固定交叉轴和主轴尺寸的，当你直接把Stack作为item返回时，Stack没继承Tile的尺寸约束，里面的Container和图片自然没法贴合Tile大小，就出现了异常的尺寸表现。

修复方案 #

给Stack加上fit: StackFit.expand属性，让Stack强制填满整个StaggeredTile的空间，这样里面的子组件就能跟着适配Tile的尺寸了。修改后的代码如下：

new StaggeredGridView.countBuilder(
  crossAxisCount: 2,
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  itemCount: model.hit.length,
  itemBuilder: (context, index) {
    return Stack(
      // 关键：添加这个属性让Stack占满Tile空间
      fit: StackFit.expand,
      children: [
        Container(
          decoration: BoxDecoration(
            color: Colors.transparent,
            borderRadius: BorderRadius.all(Radius.circular(35))
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.all(Radius.circular(35)),
            child: FadeInImage.memoryNetwork(
              placeholder: kTransparentImage,
              image: model.hit[index]['largeImageURL'],
              fit: BoxFit.cover,
            )
          ),
        )
      ],
    );
  },
  staggeredTileBuilder: (index) {
    return new StaggeredTile.count(1, index.isEven ? 1.2 : 1.8);
  }
)

额外说明 #

要是之后你需要在Stack里叠加其他组件（比如文字标签、悬浮按钮），直接用Positioned组件定位就行，StackFit.expand只会让默认子组件填满Tile，完全不影响定位组件的布局。

内容的提问来源于stack exchange，提问作者Adrita Rahman