如何为Flutter GridView内部的子组件设置固定尺寸？

问题原因 #

GridView默认会通过childAspectRatio属性控制所有子项的宽高比例，子项自身设置的固定尺寸会被GridView的布局规则覆盖。你目前的代码里用了Expanded包裹红色Container，会让红色块占满子项除了文本之外的所有剩余高度，不同长度的文本占用高度不同，自然红色块高度就不一致了。

解决方法 #

方法1：不引入第三方依赖，固定子项足够高度（适合简单场景） #

直接去掉红色块外层的Expanded，给红色块设置固定高度，同时调整GridView的childAspectRatio到足够容纳最长文本的大小，避免文本被截断，示例代码如下：

return GridView.count(
  crossAxisCount: 2,
  // 调整这个宽高比，保证子项高度足够放下最长的文本+固定高度的红色块
  childAspectRatio: 0.8,
  children: List.generate(drinksData.length, (index) {
    return Container(
      padding: EdgeInsets.all(20.0),
      child: Column(
        // 让Column不强制占满父容器高度，内容自适应
        mainAxisSize: MainAxisSize.min,
        children: [
          // 直接设置红色块固定高度，不用Expanded
          Container(
            height: 120, // 按需调整你需要的固定高度
            color: Colors.red,
          ),
          SizedBox(height: 8),
          Text(drinksData[index].label),
        ],
      ),
    );
  }),
);

方法2：子项高度完全自适应，不需要固定宽高比 #

如果你的文本长度差异很大，不想固定统一的子项高度，可以使用第三方依赖flutter_staggered_grid_view实现瀑布流布局，让每个子项的高度根据内容自动计算，红色块依然保持固定高度：

1. 先在pubspec.yaml添加依赖

dependencies:
  flutter_staggered_grid_view: ^0.7.0

2. 替换原有GridView代码：

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

// 替换原有GridView部分
return StaggeredGridView.countBuilder(
  crossAxisCount: 2,
  itemCount: drinksData.length,
  itemBuilder: (context, index) {
    return Container(
      padding: EdgeInsets.all(20.0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            height: 120, // 红色块固定高度
            color: Colors.red,
          ),
          SizedBox(height: 8),
          Text(drinksData[index].label),
        ],
      ),
    );
  },
  staggeredTileBuilder: (int index) => const StaggeredTile.fit(1),
  mainAxisSpacing: 8,
  crossAxisSpacing: 8,
);

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