Flutter：如何根据索引设置GridView子Widget高度，0、1索引为200其余为50

原代码的语法错误 #

你的代码存在两处语法问题：

• itemBuilder 开头多了一个多余的 }，直接导致语法报错
• 当 index == 0 || index == 1 时，return语句错误地添加了 child:，直接返回 CustomFrameGroup 即可

核心问题：网格委托的全局尺寸限制 #

使用 SliverGridDelegateWithFixedCrossAxisCount 时，childAspectRatio 或 mainAxisExtent 是全局生效的，无法单独为某个item设置高度。如果强制在子Widget中设置height，会被网格委托的尺寸规则覆盖，导致设置不生效。

实现方案 #

方案一：使用第三方包 flutter_staggered_grid_view #

这是最简便的实现方式，支持交错网格布局，可单独控制每个item的尺寸：

1. 先在 pubspec.yaml 中添加依赖：

dependencies:
  flutter_staggered_grid_view: ^0.7.0

2. 替换原代码为：

StaggeredGridView.countBuilder(
  physics: const NeverScrollableScrollPhysics(),
  crossAxisCount: 2,
  crossAxisSpacing: 2.0,
  mainAxisSpacing: 2.0,
  itemCount: pageData.length,
  itemBuilder: (context, index) {
    if (index == 0 || index == 1) {
      return CustomFrameGroup(
        height: 200,
        onTap: () {},
      );
    } else {
      return Padding(
        padding: const EdgeInsets.all(3.0),
        child: CustomFrameGroup(
          height: 50,
          color: Colors.teal.withOpacity(opacityValue),
          onTap: () {},
        ),
      );
    }
  },
  staggeredTileBuilder: (index) {
    // 为索引0、1设置高度200，其余设置高度50
    return StaggeredTile.extent(1, index == 0 || index == 1 ? 200 : 50);
  },
)

方案二：自定义网格委托（不依赖第三方包） #

如果不想引入第三方包，可以自定义 SliverGridDelegate 实现动态高度：

class CustomGridDelegate extends SliverGridDelegate {
  final int crossAxisCount;
  final double crossAxisSpacing;
  final double mainAxisSpacing;
  final List<double> itemHeights;

  CustomGridDelegate({
    required this.crossAxisCount,
    required this.crossAxisSpacing,
    required this.mainAxisSpacing,
    required this.itemHeights,
  });

  @override
  SliverGridLayout getLayout(SliverConstraints constraints) {
    final crossAxisExtent = (constraints.crossAxisExtent - (crossAxisCount - 1) * crossAxisSpacing) / crossAxisCount;
    return _CustomGridLayout(
      crossAxisCount: crossAxisCount,
      crossAxisSpacing: crossAxisSpacing,
      mainAxisSpacing: mainAxisSpacing,
      crossAxisExtent: crossAxisExtent,
      itemHeights: itemHeights,
    );
  }

  @override
  bool shouldRelayout(covariant CustomGridDelegate oldDelegate) {
    return crossAxisCount != oldDelegate.crossAxisCount ||
        crossAxisSpacing != oldDelegate.crossAxisSpacing ||
        mainAxisSpacing != oldDelegate.mainAxisSpacing ||
        itemHeights != oldDelegate.itemHeights;
  }
}

class _CustomGridLayout extends SliverGridLayout {
  final int crossAxisCount;
  final double crossAxisSpacing;
  final double mainAxisSpacing;
  final double crossAxisExtent;
  final List<double> itemHeights;

  _CustomGridLayout({
    required this.crossAxisCount,
    required this.crossAxisSpacing,
    required this.mainAxisSpacing,
    required this.crossAxisExtent,
    required this.itemHeights,
  });

  @override
  double computeMaxScrollOffset(int childCount) {
    if (childCount == 0) return 0;
    int rows = (childCount + crossAxisCount - 1) ~/ crossAxisCount;
    double totalHeight = 0;
    for (int i = 0; i < rows; i++) {
      int start = i * crossAxisCount;
      int end = (i + 1) * crossAxisCount;
      if (end > childCount) end = childCount;
      double maxHeight = 0;
      for (int j = start; j < end; j++) {
        if (itemHeights[j] > maxHeight) maxHeight = itemHeights[j];
      }
      totalHeight += maxHeight;
      if (i != rows - 1) totalHeight += mainAxisSpacing;
    }
    return totalHeight;
  }

  @override
  SliverGridGeometry getGeometryForChildIndex(int index) {
    int row = index ~/ crossAxisCount;
    int column = index % crossAxisCount;
    double mainAxisOffset = 0;
    for (int i = 0; i < row; i++) {
      int start = i * crossAxisCount;
      int end = (i + 1) * crossAxisCount;
      if (end > itemHeights.length) end = itemHeights.length;
      double maxHeight = 0;
      for (int j = start; j < end; j++) {
        if (itemHeights[j] > maxHeight) maxHeight = itemHeights[j];
      }
      mainAxisOffset += maxHeight + mainAxisSpacing;
    }
    return SliverGridGeometry(
      scrollOffset: mainAxisOffset,
      crossAxisOffset: column * (crossAxisExtent + crossAxisSpacing),
      mainAxisExtent: itemHeights[index],
      crossAxisExtent: crossAxisExtent,
    );
  }

  @override
  int getMinChildIndexForScrollOffset(double scrollOffset) => 0;

  @override
  int getMaxChildIndexForScrollOffset(double scrollOffset) => itemHeights.length - 1;
}

然后使用这个自定义委托：

GridView.builder(
  physics: const NeverScrollableScrollPhysics(),
  gridDelegate: CustomGridDelegate(
    crossAxisCount: 2,
    crossAxisSpacing: 2.0,
    mainAxisSpacing: 2.0,
    // 生成每个item的高度列表
    itemHeights: List.generate(pageData.length, (index) => index == 0 || index == 1 ? 200 : 50),
  ),
  itemCount: pageData.length,
  itemBuilder: (context, index) {
    if (index == 0 || index == 1) {
      return CustomFrameGroup(
        height: 200,
        onTap: () {},
      );
    } else {
      return Padding(
        padding: const EdgeInsets.all(3.0),
        child: CustomFrameGroup(
          height: 50,
          color: Colors.teal.withOpacity(opacityValue),
          onTap: () {},
        ),
      );
    }
  },
)

总结 #

• 优先推荐使用 flutter_staggered_grid_view，代码简洁易维护
• 自定义网格委托适合不想引入第三方包的场景，但需要自行处理布局计算逻辑

内容的提问来源于stack exchange，提问作者NURİ ÜLGEN