Flutter如何实现文本在父组件边缘精准截断而非整词移除

我想实现一个文本容器，当文本溢出时，剩余文本在容器边缘直接截断。但目前用TextOverflow.clip和TextOverflow.visible效果一致，会把整个溢出的单词删掉，而不是在边缘截断。

我的代码：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          color: Colors.lightBlue,
          width: 200,
          child: const Text(
            "the quick brown fox jumped over the lazy dog.",
            maxLines: 1,
            overflow: TextOverflow.clip,
          ),
        ),
        const SizedBox(
          height: 4,
        ),
        Container(
          color: Colors.lightBlue,
          width: 200,
          child: const Text(
            "the quick brown fox jumped over the lazy dog.",
            maxLines: 1,
            overflow: TextOverflow.visible,
          ),
        ),
      ],
    ),
  );
}

实际结果：
容器尾部明明还有空间能放下半个“over”单词，却把整个单词都移除了。

预期效果：
文本在容器边缘精准截断

解决方案 #

默认的Text组件因为排版策略会优先保留完整单词，所以要实现字符级的精准截断，需要自定义文本处理逻辑，以下是两种可行方式：

方式一：自定义ClipText组件（基于TextPainter）

通过TextPainter逐字符计算可容纳的文本范围，实现精准截断：

class ClipText extends StatelessWidget {
  final String text;
  final double width;
  final TextStyle? style;

  const ClipText({super.key, required this.text, required this.width, this.style});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final textPainter = TextPainter(
          text: TextSpan(text: text, style: style),
          textDirection: TextDirection.ltr,
          maxLines: 1,
        )..layout(maxWidth: width);

        if (textPainter.didExceedMaxLines) {
          var endIndex = text.length;
          // 逐字符缩减直到文本能容纳
          while (endIndex > 0) {
            final truncatedText = text.substring(0, endIndex);
            textPainter.text = TextSpan(text: truncatedText, style: style);
            textPainter.layout(maxWidth: width);
            if (!textPainter.didExceedMaxLines) break;
            endIndex--;
          }
          return Text(
            text.substring(0, endIndex),
            style: style,
            maxLines: 1,
            overflow: TextOverflow.clip,
          );
        } else {
          return Text(text, style: style);
        }
      },
    );
  }
}

使用示例：

Container(
  color: Colors.lightBlue,
  width: 200,
  child: ClipText(
    text: "the quick brown fox jumped over the lazy dog.",
    width: 200,
    style: DefaultTextStyle.of(context).style,
  ),
)

方式二：使用RichText强制字符截断

通过调整RichText的参数，关闭单词边界优先的排版逻辑：

Container(
  color: Colors.lightBlue,
  width: 200,
  child: RichText(
    text: TextSpan(
      text: "the quick brown fox jumped over the lazy dog.",
      style: DefaultTextStyle.of(context).style,
    ),
    maxLines: 1,
    overflow: TextOverflow.clip,
    softWrap: false,
    textWidthBasis: TextWidthBasis.longestLine,
  ),
)

原理说明 #

默认Text组件在单行溢出时，会优先保证单词的完整性，因此会移除整个溢出单词。而上述两种方式，要么通过TextPainter手动计算字符边界，要么通过RichText调整排版规则，都能实现文本在容器边缘的精准截断。

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