Flutter中如何获取GridView子项实际宽高以实现响应式设计

要动态算出GridView子项的宽高，核心是先拿到交叉轴的可用空间，再结合crossAxisCount和crossAxisSpacing计算子项宽度，最后通过childAspectRatio推导高度。推荐用LayoutBuilder获取父容器的实际约束，比直接用屏幕宽度更灵活（适配GridView被父组件限制宽度的场景）。

实现代码 #

LayoutBuilder(
  builder: (context, constraints) {
    // 可根据需求动态修改的配置参数
    const crossAxisCount = 4;
    const crossAxisSpacing = 8.0;
    const mainAxisSpacing = 16.0;
    const childAspectRatio = 0.8;
    // 若GridView设置了左右padding，需在此减去对应值，比如padding为16则减16*2
    final crossAxisAvailableWidth = constraints.maxWidth;

    // 计算子项宽度：可用宽度减去所有交叉轴间距后平分给每个子项
    final childWidth = (crossAxisAvailableWidth - crossAxisSpacing * (crossAxisCount - 1)) / crossAxisCount;
    // 通过宽高比反推子项高度
    final childHeight = childWidth / childAspectRatio;

    return GridView.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        mainAxisSpacing: mainAxisSpacing,
        crossAxisSpacing: crossAxisSpacing,
        childAspectRatio: childAspectRatio,
        crossAxisCount: crossAxisCount,
      ),
      itemBuilder: (context, index) {
        return CustomContainer(height: childHeight, width: childWidth);
      },
    );
  },
)

关键逻辑说明 #

1. 获取可用宽度：LayoutBuilder的constraints.maxWidth会返回GridView父容器的实际可用宽度，适配各种嵌套布局场景（比如GridView被放在带约束的Container、Scaffold body中等）。
2. 计算子项宽度：n个交叉轴子项之间有n-1个间距，用可用宽度减去总间距后除以子项数量，得到单个子项的准确宽度。
3. 推导子项高度：利用childAspectRatio = 宽度/高度的关系，直接反算出子项高度。

如果你的GridView是全屏占满的，也可以用MediaQuery.of(context).size.width替代constraints.maxWidth，但LayoutBuilder的适配性更强。

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