Flutter Web中Staggered Grid View瓦片宽高比自定义问题

你当前使用的SliverQuiltedGridDelegate默认以1:1的单格宽高比计算单元尺寸：QuiltedGridTile(纵向占格数, 横向占格数)的逻辑下，单格宽度=（可用总宽度-横向总间距）/横向列数，单格高度和单格宽度完全相等，没有开放自定义宽高比的参数，所以你无法直接调整瓦片的高宽比例。

推荐直接替换为同插件下支持自定义宽高比的StaggeredGrid.count实现，完全匹配你要的布局结构，且可以自由调整宽高比，替换后的代码如下：

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<LoginController>(
      builder: (controller) => Container(
        color: AppColors.doveGray,
        padding: const EdgeInsets.fromLTRB(100, 20, 100, 20),
        child: Scaffold(
          appBar: const CustomAppBar(isPhone: false),
          backgroundColor: AppColors.doveGray,
          body: Container(
            // 移除原有固定0.75屏高的约束，避免调整比例后出现溢出或多余留白
            child: StaggeredGrid.count(
              crossAxisCount: 4,
              mainAxisSpacing: 20,
              crossAxisSpacing: 20,
              // 宽高比=单格宽度/单格高度，按需修改这个值即可调整瓦片比例
              // 比如设为1.25，代表单格高度是宽度的80%；设为0.8代表高度是宽度的125%
              childAspectRatio: 1,
              children: [
                // 第一个瓦片纵向占2格、横向占1格，对应原有布局里的大尺寸卡片
                const StaggeredGridTile.count(
                  crossAxisCellCount: 1,
                  mainAxisCellCount: 2,
                  child: HomeTileWidget(),
                ),
                // 剩余8个瓦片都是1x1规格的普通卡片
                ...List.generate(8, (index) => const StaggeredGridTile.count(
                  crossAxisCellCount: 1,
                  mainAxisCellCount: 1,
                  child: HomeTileWidget(),
                ))
              ],
            ),
          ),
        ),
      ),
    );
  }
}

• 如果你需要瓦片高度随内部内容自适应，不需要固定宽高比，可以把StaggeredGridTile.count换成StaggeredGridTile.fit，不用设置固定的纵向占格数，高度会自动根据内容撑开。
• 如果你一定要保留SliverQuiltedGridDelegate的镜像重复排列逻辑，可以手动计算总高度做间接适配：先算出单格宽度，再根据你想要的宽高比算出单格高度，最后给外层Container设置对应总高度即可，不过这种方案适配不同屏幕时容易出现溢出，不推荐使用。

内容的提问来源于stack exchange，提问作者vishnu anilkumar