Flutter如何实现动态字符串中链接前文本加粗及点击跳转

从Firebase获取的动态带格式字符串，和iOS端NSAttributedString渲染效果对齐的实现方式如下，优先选生态成熟的方案，不用自己硬写正则拆文本，兼容性更好：

方案一：使用HTML渲染组件（推荐，适配动态内容能力强） #

• 第一步：添加项目依赖
  在pubspec.yaml文件中加入两个依赖，分别负责HTML富文本渲染、点击事件跳转系统能力：

dependencies:
  flutter:
    sdk: flutter
  flutter_html: ^3.0.0-beta.2
  url_launcher: ^6.2.5

执行flutter pub get完成依赖安装。

• 第二步：封装富文本渲染组件
  直接传入从Firebase拉取到的动态HTML字符串，自定义标签规则匹配样式要求，同时绑定链接点击逻辑：

import 'package:flutter_html/flutter_html.dart';
import 'package:url_launcher/url_launcher.dart';

Widget buildFirebaseRichText(String dynamicContent) {
  return Html(
    data: dynamicContent,
    style: {
      // 全局正文基础样式，可根据设计调整字号、行高、颜色
      "body": Style(
        fontSize: FontSize(16),
        lineHeight: LineHeight(1.5),
        color: const Color(0xFF333333),
      ),
      // 匹配strong标签，设置加粗效果
      "strong": Style(
        fontWeight: FontWeight.w700,
      ),
      // 自定义链接样式，去掉默认蓝色下划线，和加粗文本样式对齐
      "a": Style(
        color: const Color(0xFF333333),
        textDecoration: TextDecoration.none,
        fontWeight: FontWeight.w700,
      )
    },
    onLinkTap: (targetUrl, _, __) async {
      if (targetUrl == null) return;
      // 处理邮件地址跳转
      String jumpUrl = targetUrl;
      // 如果返回的链接没有带mailto前缀，自行判断邮箱格式补全
      if (targetUrl.contains("@") && !targetUrl.startsWith("mailto:")) {
        jumpUrl = "mailto:$targetUrl";
      }
      final uri = Uri.parse(jumpUrl);
      if (await canLaunchUrl(uri)) {
        await launchUrl(uri);
      }
    },
  );
}

注意：iOS端需要在Info.plist里补充对应跳转权限配置，否则无法打开系统邮件应用。

方案二：原生RichText实现（无第三方依赖，适合固定格式场景） #

如果不想引入第三方包，可以用Flutter自带的RichText组件，通过正则匹配需要特殊处理的文本片段，拼接不同样式的TextSpan实现：

• 写正则匹配需要加粗、加点击事件的目标文本，以及对应的跳转邮箱地址
• 遍历拆分后的文本片段，普通文本生成普通TextSpan，需要特殊处理的片段生成带点击事件、加粗样式的TextSpan
• 给可点击TextSpan绑定手势识别器，点击时触发邮件跳转
  这种方案的缺点是对动态内容格式兼容性差，一旦Firebase返回的文本格式调整，正则规则很容易失效，仅适合文本格式完全固定的场景使用。

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