Flutter如何让GridView/ListView所有子项高度统一为最高子项高度

本方案解决固定宽高比GridView内容截断/空白过多、IntrinsicHeight行列组合仅支持单行等高的问题，可实现所有网格子项高度统一为全局最大内容高度。

核心实现思路 #

• 预先测量所有子项的实际内容高度，取最大值作为全局统一子项高度
• 替换GridView的childAspectRatio属性，使用mainAxisExtent直接指定子项主轴高度，实现所有子项等高

具体代码实现 #

1. 预计算全局最大子项高度 #

以子项包含固定高度图片+可变长度文本为例，使用TextPainter预先测量文本高度，累加得到子项总高度：

import 'package:flutter/material.dart';

class GridPage extends StatefulWidget {
  const GridPage({super.key});

  @override
  State<GridPage> createState() => _GridPageState();
}

class _GridPageState extends State<GridPage> {
  // 配置参数
  final int crossAxisCount = 2; // 每行列数
  final double horizontalPadding = 16; // 网格左右内边距
  final double crossAxisSpacing = 12; // 列间距
  final double imageHeight = 120; // 子项内图片固定高度
  final double itemVerticalPadding = 16; // 子项上下内边距
  final TextStyle titleStyle = const TextStyle(fontSize: 14, height: 1.4);

  // 模拟数据源
  final List<Map<String, String>> items = [
    {"title": "短标题", "img": "xxx"},
    {"title": "这是一个非常长的标题，会换行显示占用更多高度", "img": "xxx"},
    {"title": "中等长度的标题示例", "img": "xxx"},
  ];

  double maxItemHeight = 0;

  @override
  void initState() {
    super.initState();
    _calculateMaxItemHeight();
  }

  // 计算所有子项的最大高度
  void _calculateMaxItemHeight() {
    // 计算单个子项的可用宽度
    final screenWidth = MediaQuery.of(context).size.width;
    final itemAvailableWidth = (screenWidth - horizontalPadding * 2 - crossAxisSpacing * (crossAxisCount - 1)) / crossAxisCount;

    double tempMaxHeight = 0;
    for (var item in items) {
      // 测量文本高度
      final textPainter = TextPainter(
        text: TextSpan(text: item["title"]!, style: titleStyle),
        maxLines: null,
        textDirection: TextDirection.ltr,
      )..layout(maxWidth: itemAvailableWidth);

      // 计算当前子项总高度：图片高度 + 上下内边距 + 文本高度 + 其他元素高度（如有）
      final itemHeight = imageHeight + itemVerticalPadding * 2 + textPainter.height;
      if (itemHeight > tempMaxHeight) {
        tempMaxHeight = itemHeight;
      }
    }

    setState(() {
      maxItemHeight = tempMaxHeight;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: horizontalPadding),
        // 2. 构建等高GridView
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: crossAxisCount,
            crossAxisSpacing: crossAxisSpacing,
            mainAxisSpacing: 12,
            // 直接指定子项高度，不要使用childAspectRatio
            mainAxisExtent: maxItemHeight,
          ),
          itemCount: items.length,
          itemBuilder: (context, index) {
            final item = items[index];
            return Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                color: Colors.white,
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(height: imageHeight, color: Colors.grey[200], child: const Center(child: Text("图片区域"))),
                  Padding(
                    padding: EdgeInsets.all(itemVerticalPadding),
                    child: Text(item["title"]!, style: titleStyle),
                  )
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

2. 复杂子项的高度测量方案 #

如果子项布局非常复杂，无法通过手动累加计算高度，可以使用Offstage组件在不可见区域渲染所有子项，通过GlobalKey获取实际渲染后的高度：

// 子项布局和实际渲染的子项完全一致，放在Offstage中隐藏
Offstage(
  offstage: true,
  child: Column(
    children: items.map((item) => YourItemWidget(data: item, key: GlobalKey())).toList(),
  ),
)
// 布局完成后遍历所有GlobalKey获取渲染高度，取最大值

效果参考 #

适配提示 #

• 动态更新数据源时，需要重新调用高度计算方法刷新maxItemHeight
• 首屏加载可以设置兜底默认高度，避免计算完成前布局错乱
• 支持响应式布局，屏幕宽度变化时重新计算高度即可适配

内容的提问来源于stack exchange，提问作者Tan Boon Jun