Flutter中StaggeredGridView设置3列却仅显示2列如何解决？

问题核心原因 #

你代码中两处配置错误导致无法实现3列瀑布流：

• staggeredTileBuilder返回的StaggeredTile.fit(2)表示每个子项占用2份横轴空间，而你设置的crossAxisCount: 3仅将横轴分为3份，剩余1份无法容纳第二个子项，自然最多只能显示2列。
• 手动给Image、Text外层容器设置固定宽度constraints.maxWidth * 0.2，和StaggeredGridView自动分配的子项宽度冲突，会导致布局错位。

修复方案 #

修改代码如下：

Container(
    width: constraints.maxWidth,
    height: constraints.maxHeight - 72,
    child: StaggeredGridView.countBuilder(
      crossAxisCount: 3,
      padding: EdgeInsets.all(2.0),
      // 这里改为每个子项占1份横轴空间
      staggeredTileBuilder: (int index) => StaggeredTile.fit(1),
      mainAxisSpacing: 4.0,
      crossAxisSpacing: 4.0,
      itemCount: webPage['images_results'].length,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          child: InkWell(
            onTap: () {},
            child: Column(children: <Widget>[
              // 移除固定宽度，自动填充分配的空间
              Image(
                fit: BoxFit.cover,
                image: NetworkImage(
                    webPage['images_results'][index]['thumbnail']),
              ),
              SizedBox(
                height: 1,
              ),
              // 移除固定宽度，自动填充
              Container(
                child: Text(webPage['images_results'][index]['title'],
                    style: style1.copyWith(color: text2, fontSize: 16)),
              ),
              SizedBox(
                height: 1,
              ),
              Text(webPage['images_results'][index]['source'],
                  style: style1.copyWith(color: text3, fontSize: 10)),
            ]),
          ),
        );
      },
    ))

如果需要实现部分大图跨列的错落效果，可以根据图片尺寸或者索引动态返回StaggeredTile参数，示例如下：

staggeredTileBuilder: (int index) {
  // 示例：每3个元素显示1个占2份宽度的大图
  if (index % 3 == 0) {
    return StaggeredTile.fit(2);
  }
  return StaggeredTile.fit(1);
}

内容的提问来源于stack exchange，提问作者Siddharth Agrawal