Flutter Text组件固定最大高度适配系统字号，溢出显示省略号方案

直接硬编码maxLines+固定height的方案会在系统字号调整时失效——当字号放大，单行文本高度增加，固定高度无法容纳指定行数，导致文本被截断。以下是通用解决方案：

核心思路 #

通过动态计算当前文本样式下的单行高度，结合设定的最大高度，算出可容纳的最大行数，再将该行数赋值给Text组件的maxLines属性，确保文本总高度始终不超过设定值，同时溢出时显示省略号。

实现代码 #

自定义可复用组件 #

封装一个AutoEllipsisText组件，方便全局使用：

class AutoEllipsisText extends StatelessWidget {
  final String text;
  final TextStyle style;
  final double maxHeight;

  const AutoEllipsisText({
    super.key,
    required this.text,
    required this.style,
    required this.maxHeight,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // 计算单行文本的实际高度（含系统字号缩放）
        final textPainter = TextPainter(
          text: TextSpan(text: ' ', style: style),
          textDirection: TextDirection.ltr,
        )..layout(maxWidth: constraints.maxWidth);
        final singleLineHeight = textPainter.height;

        // 根据最大高度计算可容纳的最大行数
        final maxLines = (maxHeight / singleLineHeight).floor();

        return Text(
          text,
          style: style,
          maxLines: maxLines,
          overflow: TextOverflow.ellipsis,
        );
      },
    );
  }
}

使用示例 #

替换原有的Text组件即可：

SizedBox(
  height: 50,
  child: AutoEllipsisText(
    text: article.title + "edzaedz daz dz dza dza dza dz adz ",
    style: TheOnesTextStyle.paragraphBoldMedium(),
    maxHeight: 50,
  ),
)

原理说明 #

1. TextPainter计算单行高度：通过绘制一个空文本（或任意单个字符），获取当前样式下的单行实际高度，这个高度会自动适配系统字号的缩放比例。
2. 动态计算最大行数：用设定的最大高度除以单行高度，取整数得到可容纳的最大行数，确保文本总高度不会超出限制。
3. 适配溢出逻辑：将计算出的行数传给Text的maxLines，结合overflow: TextOverflow.ellipsis，实现溢出时显示省略号的效果。

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