Flutter如何实现crossAxisCount=2时的多尺寸产品卡片列表？

别用随机尺寸了，直接通过索引判断来控制卡片比例，规律又可控，完全适配crossAxisCount=2的网格布局：

基础交替方案（每行一一方形+矩形） #

在GridView.builder里，根据item的索引区分类型：偶数索引做方形（1:1），奇数索引做矩形（比如竖长的0.5，或者横长的2.0，按需调整）。代码示例：

GridView.builder(
  padding: EdgeInsets.all(16),
  crossAxisCount: 2,
  crossAxisSpacing: 12,
  mainAxisSpacing: 12,
  itemCount: products.length,
  itemBuilder: (context, index) {
    final isSquare = index % 2 == 0;
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        color: Colors.grey[200],
      ),
      child: AspectRatio(
        aspectRatio: isSquare ? 1.0 : 0.5, // 方形用1.0，竖长矩形用0.5
        child: Center(
          child: Text(products[index].name),
        ),
      ),
    );
  },
)

进阶错落布局（一行大矩形+一行两个方形） #

要是想视觉效果更跳脱，可以搞成“一行占满整行的大矩形，下一行两个方形”的组合，用GridTile的跨列属性就能实现：

GridView.builder(
  padding: EdgeInsets.all(16),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 12,
    mainAxisSpacing: 12,
    childAspectRatio: 1.0,
  ),
  itemCount: products.length,
  itemBuilder: (context, index) {
    // 每3个item为一组：1个大矩形 + 2个方形
    final groupIndex = index ~/ 3;
    final positionInGroup = index % 3;
    
    if (positionInGroup == 0) {
      // 大矩形跨2列
      return GridTile(
        crossAxisSpan: 2,
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            color: Colors.grey[200],
          ),
          child: AspectRatio(
            aspectRatio: 2.0, // 横长比例适配跨列宽度
            child: Center(child: Text(products[index].name)),
          ),
        ),
      );
    } else {
      // 标准方形卡片
      return Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8),
          color: Colors.grey[200],
        ),
        child: Center(child: Text(products[index].name)),
      );
    }
  },
)

小提醒 #

• 调整aspectRatio时要对应产品图的实际比例，别让图片拉伸变形
• 要是用网络图，记得配合BoxFit.cover或者CachedNetworkImage优化显示效果
• 索引判断逻辑可以灵活修改，比如按行交替而不是按item交替，完全看你想要的布局

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