如何通过gridDelegate参数修复Flutter GridView多设备显示不一致问题

我使用了SliverGrid（类似GridView.builder），通过MediaQuery设置网格尺寸，但不同设备上显示效果不一致。请问gridDelegate中的哪个参数可以修复该问题？

我的代码：

Widget buildCatalog(List<Product> product) => CustomScrollView(
        controller: sController,
        slivers: [
          SliverGrid(
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                // mainAxisExtent: ,
                maxCrossAxisExtent: 300,
                childAspectRatio: MediaQuery.of(context).size.width /
                    (MediaQuery.of(context).size.height / 1.3),
                crossAxisSpacing: 10,
                mainAxisSpacing: 10),
            delegate: SliverChildBuilderDelegate(childCount: product.length,
                (BuildContext context, int index) {
              return GestureDetector(
                onTap: () {},
                child: Container(
                  padding: const EdgeInsets.only(left: 2, right: 2, top: 5),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(8)),
                  child: Column(
                    children: <Widget>[
                      InkWell(
                        child: Container(
                          margin: const EdgeInsets.only(top: 5),
                          child: Image.network(),
                        ),
                      ),
                      const SizedBox(
                        height: 10,
                      ),
                      Text(),
                      // Spacer(),
                      const SizedBox(height: 8),
                      Text(),
                      const SizedBox(height: 5),
                      buildButton(index, productItem.id),
                    ],
                  ),
                ),
              );
            }),
          ),
]
);

大屏显示效果：

小屏显示效果：

问题出在childAspectRatio的计算方式，你当前用整个屏幕的宽高比定义子项的宽高比例，导致不同尺寸屏幕上子项形状差异极大——大屏上子项宽扁，小屏上子项窄高。

修复核心是调整childAspectRatio参数：

• 不要依赖屏幕整体宽高计算比例，给子项设置固定的、符合UI需求的宽高比（比如商品卡片常用0.7，即高度约为宽度的1.4倍）。
• 同时优化maxCrossAxisExtent，用相对屏幕宽度的比例代替固定值，让网格在不同屏幕上自动适配列数。

修改后的gridDelegate示例：

gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
  maxCrossAxisExtent: MediaQuery.of(context).size.width * 0.45, // 子项宽度占屏幕45%，大屏自动显示2列
  childAspectRatio: 0.7, // 固定子项宽高比，可根据UI需求调整
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
),

调整后，无论屏幕尺寸如何，子项形状都会保持一致，同时网格列数会根据屏幕宽度自动适配，解决不同设备显示不一致的问题。

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