You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在使用intl和flutter_localizations的多语言Flutter应用中设置单行文本多样式

在Flutter多语言项目中实现带加粗样式的文本

在使用intl和flutter_localizations的多语言场景下,无法直接在arb资源文件中嵌入富文本样式,但可以通过以下几种方式实现需求:

方法一:拆分文案为独立资源项,用RichText拼接

把需要区分样式的文本拆成单独的arb键,再通过RichText组合不同样式的TextSpan。

  1. 在intl_en.arb中定义拆分后的文案:
{
  "sessionEndedPrefix": "Your session ended because there was ",
  "noActivity": "no activity",
  "sessionEndedSuffix": " for a long time."
}

对应的intl_zh.arb:

{
  "sessionEndedPrefix": "您的会话已结束,因为长时间",
  "noActivity": "无操作",
  "sessionEndedSuffix": "。"
}
  1. 在代码中组合为富文本:
RichText(
  text: TextSpan(
    // 继承默认文本样式
    style: DefaultTextStyle.of(context).style,
    children: [
      TextSpan(text: AppLocalizations.of(context)!.sessionEndedPrefix),
      TextSpan(
        text: AppLocalizations.of(context)!.noActivity,
        style: const TextStyle(fontWeight: FontWeight.bold),
      ),
      TextSpan(text: AppLocalizations.of(context)!.sessionEndedSuffix),
    ],
  ),
)

这种方式逻辑简单,完全适配多语言文案结构,不会出现解析错误。

方法二:在arb中嵌入自定义标记,解析为富文本

在arb文案中用自定义标记(比如**)包裹需要加粗的内容,再通过正则解析成对应的TextSpan。

  1. 在arb文件中添加带标记的文案:
    intl_en.arb:
{
  "sessionEnded": "Your session ended because there was **no activity** for a long time."
}

intl_zh.arb:

{
  "sessionEnded": "您的会话已结束,因为长时间**无操作**。"
}
  1. 实现解析函数:
List<TextSpan> parseMarkdownStyleText(String text) {
  final spans = <TextSpan>[];
  final boldRegex = RegExp(r'\*\*(.*?)\*\*');
  int lastPosition = 0;

  // 遍历所有匹配的加粗标记
  for (final match in boldRegex.allMatches(text)) {
    // 添加标记前的普通文本
    if (match.start > lastPosition) {
      spans.add(TextSpan(text: text.substring(lastPosition, match.start)));
    }
    // 添加加粗文本
    spans.add(TextSpan(
      text: match.group(1),
      style: const TextStyle(fontWeight: FontWeight.bold),
    ));
    lastPosition = match.end;
  }

  // 添加剩余的普通文本
  if (lastPosition < text.length) {
    spans.add(TextSpan(text: text.substring(lastPosition)));
  }

  return spans;
}
  1. 在页面中使用:
RichText(
  text: TextSpan(
    style: DefaultTextStyle.of(context).style,
    children: parseMarkdownStyleText(AppLocalizations.of(context)!.sessionEnded),
  ),
)

这种方式适合文案结构复杂、需要多种样式的场景,但要注意自定义标记不能和文案内容冲突,所有语言版本的标记格式要统一。


内容的提问来源于stack exchange,提问作者saeed z

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.16 19:43:15