Flutter：如何在动态高度Container中隐藏溢出文本

你可以通过LayoutBuilder结合TextPainter动态计算文本可显示的最大行数，无需手动指定固定的maxLines，完美适配动态高度的容器。

实现代码 #

Container(
  height: MediaQuery.of(context).size.height * .3,
  color: Colors.red,
  child: LayoutBuilder(
    builder: (context, constraints) {
      // 定义文本样式，确保和Text组件完全一致
      final textStyle = TextStyle(
        color: Colors.white,
        fontSize: 12,
        letterSpacing: .5,
        height: 1.3,
      );
      // 用TextPainter模拟文本绘制，计算行数
      final textPainter = TextPainter(
        text: TextSpan(
          text: 'Adipisci placeat ipsum et reiciendis sunt velit. Adipisci placeat ipsum et reiciendis sunt velit. Adipisci placeat ipsum et reiciendis sunt velit. Adipisci placeat ipsum et reiciendis sunt velit. Adipisci placeat ipsum et reiciendis sunt velit. Adipisci placeat ipsum et reiciendis sunt velit. Adipisci placeat ipsum et reiciendis sunt velit.',
          style: textStyle
        ),
        maxLines: null,
        textDirection: TextDirection.ltr,
      )..layout(maxWidth: constraints.maxWidth);

      // 计算单行高度，再用容器高度除以单行高度得到最大行数
      final lineMetrics = textPainter.computeLineMetrics();
      if (lineMetrics.isEmpty) return SizedBox();
      final singleLineHeight = lineMetrics.first.height;
      final maxLines = (constraints.maxHeight / singleLineHeight).floor();

      return Text(
        'Adipisci placeat ipsum et reiciendis sunt velit. Adipisci placeat ipsum et reiciendis sunt velit. Adipisci placeat ipsum et reiciendis sunt velit. Adipisci placeat ipsum et reiciendis sunt velit. Adipisci placeat ipsum et reiciendis sunt velit. Adipisci placeat ipsum et reiciendis sunt velit. Adipisci placeat ipsum et reiciendis sunt velit.',
        style: textStyle,
        overflow: TextOverflow.ellipsis,
        maxLines: maxLines,
      );
    },
  ),
)

原理说明 #

1. LayoutBuilder：获取父容器（动态高度的Container）的可用宽高约束，确保计算基于当前容器的实际尺寸。
2. TextPainter：模拟文本在指定宽度下的渲染，通过computeLineMetrics()拿到单行文本的高度，再结合容器高度算出能容纳的最大行数。
3. 把计算出的maxLines传给Text组件，就能让文本自动适配容器高度，超出部分显示省略号。

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