如何获取Text Widget在溢出前的已显示字符串长度？

可以通过TextPainter模拟Text组件的绘制逻辑，计算出固定宽度、指定最大行数下能显示的字符数量，具体实现如下：

实现步骤 #

1. 编写工具函数，利用TextPainter布局文本，获取可见区域的字符偏移量
2. 通过GlobalKey或LayoutBuilder获取SizedBox的实际宽度
3. 在组件渲染完成后调用工具函数，得到实际显示的字符数

工具函数代码 #

int getVisibleTextCount(String fullText, TextStyle textStyle, double availableWidth, int maxLines) {
  final textPainter = TextPainter(
    text: TextSpan(text: fullText, style: textStyle),
    maxLines: maxLines,
    textDirection: TextDirection.ltr, // 和实际Text保持一致
  )..layout(maxWidth: availableWidth);

  // 获取最后一个可见字符的偏移位置
  final lastVisibleOffset = textPainter.getPositionForOffset(Offset(availableWidth, double.infinity)).offset;
  // 确保结果在合理范围内，避免超出原字符串长度
  return lastVisibleOffset.clamp(0, fullText.length);
}

实际使用示例 #

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

  @override
  State<VisibleTextDemo> createState() => _VisibleTextDemoState();
}

class _VisibleTextDemoState extends State<VisibleTextDemo> {
  final GlobalKey _sizedBoxKey = GlobalKey();
  final String longText = "这里是一段非常长的测试字符串，用来验证Text组件在固定宽度和指定最大行数下实际显示的字符数量，你可以替换成自己的业务文本内容。";
  int visibleCount = 0;

  @override
  void initState() {
    super.initState();
    // 等待组件渲染完成后计算
    WidgetsBinding.instance.addPostFrameCallback((_) {
      calculateVisibleCount();
    });
  }

  void calculateVisibleCount() {
    final renderBox = _sizedBoxKey.currentContext?.findRenderObject() as RenderBox?;
    if (renderBox == null) return;
    final boxWidth = renderBox.size.width;
    final textStyle = const TextStyle(fontSize: 16); // 和Text组件的样式完全一致

    setState(() {
      visibleCount = getVisibleTextCount(longText, textStyle, boxWidth, 4);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          key: _sizedBoxKey,
          width: 250, // 固定宽度
          child: Text(
            longText,
            maxLines: 4,
            overflow: TextOverflow.ellipsis,
            style: const TextStyle(fontSize: 16),
          ),
        ),
        const SizedBox(height: 16),
        Text("实际显示字符数：$visibleCount"),
      ],
    );
  }
}

注意事项 #

• 必须保证TextPainter的样式、maxLines、textDirection和实际使用的Text组件完全一致，否则计算结果会出现偏差
• 如果文本包含emoji、特殊符号等宽字符，计算结果可能需要额外校验，因为这类字符的绘制宽度和普通字符不同
• 要在组件渲染完成后再获取SizedBox的宽度，否则会得到错误的尺寸值

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