Flutter中如何为句子里@开头的单词设置单独颜色？

要实现Instagram评论区那种@用户高亮的效果，最直接的方式是用Flutter原生的RichText组件，配合正则表达式识别目标文本片段，再分别设置样式。下面是具体实现步骤：

核心思路 #

1. 用正则表达式匹配所有以@开头的单词（比如@username）
2. 将原文本拆分成普通文本片段和高亮文本片段
3. 用RichText组合这些片段，给高亮片段单独设置颜色

代码示例 #

先写一个工具函数，把输入文本转换成RichText：

RichText buildHighlightedText(String text) {
  // 匹配@开头的单词，正则可按需调整（比如支持带点/下划线的用户名）
  final regex = RegExp(r'@\w+');
  final spans = <TextSpan>[];
  int start = 0;

  // 遍历所有匹配结果
  for (final match in regex.allMatches(text)) {
    // 添加匹配前的普通文本
    if (match.start > start) {
      spans.add(TextSpan(
        text: text.substring(start, match.start),
        style: const TextStyle(color: Colors.black),
      ));
    }
    // 添加高亮的@用户文本
    spans.add(TextSpan(
      text: text.substring(match.start, match.end),
      style: const TextStyle(color: Colors.blueAccent, fontWeight: FontWeight.w500),
      // 可选：添加点击事件，比如跳转到用户主页
      recognizer: TapGestureRecognizer()
        ..onTap = () {
          print('点击用户: ${text.substring(match.start, match.end)}');
        },
    ));
    start = match.end;
  }

  // 添加剩余的普通文本
  if (start < text.length) {
    spans.add(TextSpan(
      text: text.substring(start),
      style: const TextStyle(color: Colors.black),
    ));
  }

  return RichText(
    text: TextSpan(children: spans),
    softWrap: true,
  );
}

然后在Widget里直接调用这个函数：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Padding(
      padding: const EdgeInsets.all(16.0),
      child: buildHighlightedText('Hey @alice, did you see @bob\'s new post?'),
    ),
  );
}

注意事项 #

• 正则表达式可根据实际需求调整，比如用户名支持.或_的话，改成r'@[\w.]+'即可
• 原生实现无需额外依赖，性能足够应对大部分场景
• 如果项目频繁用到这类富文本，可以封装成自定义Widget复用

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