Flutter styled_text包：如何获取StyledText组件的显示文本？

我在项目里用styled_text包构建富文本，它比Flutter原生RichText好用太多。比如这段代码：

String name = 'Cedric';
StyledText myStyledText = StyledText(
  text: "Hello <name/>, <b>bold text</b>",
  tags: {
    'b': StyledTextTag(style: TextStyle(fontWeight: FontWeight.bold)),
    'name': StyledTextWidgetTag(Text(name)),
  },
);

组件渲染后显示的是“Hello Cedric, bold text”，但调用myStyledText.text只能拿到带标签的原始字符串。我需要把替换完变量、去掉样式标签的纯文本提取出来，传给只接受字符串参数的Tooltip组件，已经找到了解决方案，分享给大家。

解决方案：自定义解析函数 #

写一个工具函数，专门处理styled_text的原始文本和标签规则，提取出纯显示文本：

String extractStyledTextPlainContent(StyledText styledText) {
  String plainText = styledText.text;

  // 遍历所有标签，分别处理Widget标签和样式标签
  styledText.tags.forEach((tagName, tag) {
    if (tag is StyledTextWidgetTag) {
      // 提取WidgetTag里的文本内容（这里假设是Text组件，可根据实际情况调整）
      if (tag.child is Text) {
        final replacementText = (tag.child as Text).data ?? '';
        // 替换自闭合标签 <tagName/>
        plainText = plainText.replaceAll('<$tagName/>', replacementText);
      }
    } else if (tag is StyledTextTag) {
      // 移除样式标签，保留标签内的文本内容
      plainText = plainText.replaceAll(RegExp('<$tagName>(.*?)</$tagName>'), r'$1');
    }
  });

  return plainText;
}

使用方式 #

调用这个函数就能拿到需要的纯文本：

String tooltipText = extractStyledTextPlainContent(myStyledText);
// 直接传给Tooltip的message参数
Tooltip(
  message: tooltipText,
  child: YourWidget(),
);

注意事项 #

这个函数针对示例里的简单标签场景做了处理，如果你的项目里有带属性的标签或者更复杂的标签结构，可以根据styled_text的标签语法扩展正则表达式或者处理逻辑，适配自己的需求。

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