Flutter中如何让GridView组件自动适配屏幕尺寸

要让GridView里的组件自动适配屏幕，核心是动态计算每个item的可用宽度，再结合你需要的宽高比来确定最终尺寸，以下是具体修改方案：

方案一：用LayoutBuilder获取父容器约束（推荐） #

用LayoutBuilder可以获取GridView所在父容器的可用宽度，避免依赖全局屏幕尺寸，适配场景更灵活：

LayoutBuilder(
  builder: (context, constraints) {
    // 拿到父容器的可用宽度
    final availableWidth = constraints.maxWidth;
    // 左右padding的总和
    final totalPadding = 30 * 2;
    // 你设置的列数
    final crossAxisCount = itemsInRow();
    // 横向间距的总和（列数-1个间距）
    final totalSpacing = 16 * (crossAxisCount - 1);
    // 单个item的实际可用宽度
    final itemWidth = (availableWidth - totalPadding - totalSpacing) / crossAxisCount;
    // 保持你需要的2/3宽高比，计算对应高度
    final itemHeight = itemWidth * 3 / 2;

    return GridView.count(
      padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 30),
      crossAxisSpacing: 16,
      mainAxisSpacing: 16,
      // 用计算好的宽高比，保证尺寸适配
      childAspectRatio: itemWidth / itemHeight,
      crossAxisCount: crossAxisCount,
      children: _items.map((item) {
        return Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
          child: ClipRRect(
            clipBehavior: Clip.hardEdge,
            borderRadius: BorderRadius.circular(10.0),
            child: Container(
              color: Colors.red,
              // 也可以直接设置固定高度：height: itemHeight
            ),
          ),
        );
      }).toList(),
    );
  },
)

方案二：直接基于屏幕尺寸计算 #

如果GridView确实占满整个屏幕宽度，也可以用MediaQuery直接获取屏幕宽度来计算：

final screenWidth = MediaQuery.of(context).size.width;
final totalPadding = 30 * 2;
final crossAxisCount = itemsInRow();
final totalSpacing = 16 * (crossAxisCount - 1);
// 单个item的宽度
final itemWidth = (screenWidth - totalPadding - totalSpacing) / crossAxisCount;

// 后续保持原有的childAspectRatio即可，宽度计算好后高度会按比例自动适配
GridView.count(
  padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 30),
  crossAxisSpacing: 16,
  mainAxisSpacing: 16,
  childAspectRatio: 2/3,
  crossAxisCount: crossAxisCount,
  children: _items.map((item) {
    // 你的Card组件代码不变
  }).toList(),
)

额外优化：让列数也自适应屏幕（可选） #

如果你的itemsInRow()还没实现动态列数逻辑，可以补充这个逻辑，比如：

int itemsInRow() {
  final screenWidth = MediaQuery.of(context).size.width;
  // 屏幕宽于600时显示3列，否则2列，可根据需求调整阈值
  return screenWidth > 600 ? 3 : 2;
}

这样列数和item尺寸都会自动适配不同屏幕大小，保证所有组件都能完整显示在屏幕内。

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