Flutter使用intl包实现多语言本地化场景下局部文本样式自定义方案

以下两种方案均不需要引入第三方依赖，也不需要拆分多语言条目，天然适配不同语言的语序差异： #

方案1：自定义标记解析（适合多位置、多样式的复杂场景） #

你可以在本地化字符串里插入自定义的语义标签，再通过通用方法解析成富文本样式：

1. 调整本地化json配置，给需要加粗的占位符包裹自定义标签

{
  "name": "Your name is <b>{name}</b>",
  "@name": {
    "placeholders": {
       "name": {}
    }
  }
}

2. 实现通用的标签解析工具方法，把带标签的字符串转换为RichText可用的TextSpan列表

List<TextSpan> parseStyledText(String rawText, Map<String, TextStyle> tagStyles) {
  final spans = <TextSpan>[];
  final tagRegex = RegExp(r'<(\w+)>(.*?)<\/\1>');
  int currentPosition = 0;

  for (final match in tagRegex.allMatches(rawText)) {
    // 添加标签前的普通文本
    if (match.start > currentPosition) {
      spans.add(TextSpan(text: rawText.substring(currentPosition, match.start)));
    }
    // 给标签内的文本应用对应样式
    final tag = match.group(1)!;
    final content = match.group(2)!;
    spans.add(TextSpan(
      text: content,
      style: tagStyles[tag] ?? const TextStyle(),
    ));
    currentPosition = match.end;
  }
  // 添加最后一段普通文本
  if (currentPosition < rawText.length) {
    spans.add(TextSpan(text: rawText.substring(currentPosition)));
  }
  return spans;
}

3. 组件内调用

class MyWidget extends StatelessWidget {
  final String _name = 'User';
  @override
  Widget build(BuildContext context) {
    final rawLocalizedStr = AppLocalizations.of(context)!.name(_name);
    return RichText(
      text: TextSpan(
        // 继承当前上下文的默认文本样式
        style: DefaultTextStyle.of(context).style,
        children: parseStyledText(rawLocalizedStr, {
          'b': const TextStyle(fontWeight: FontWeight.bold),
          // 可扩展其他标签的样式，比如'i'对应斜体，'red'对应红色文字等
        }),
      ),
    );
  }
}

方案2：占位符内容定位（适合仅占位符需要加样式的简单场景） #

如果只有占位符插入的内容需要自定义样式，不需要给其他文本加样式，可以不用修改本地化配置，直接定位占位符内容的位置加样式：

class MyWidget extends StatelessWidget {
  final String _name = 'User';
  @override
  Widget build(BuildContext context) {
    final fullLocalizedStr = AppLocalizations.of(context)!.name(_name);
    // 定位占位符内容在翻译后字符串中的位置
    final nameStartIndex = fullLocalizedStr.indexOf(_name);
    return RichText(
      text: TextSpan(
        style: DefaultTextStyle.of(context).style,
        children: [
          TextSpan(text: fullLocalizedStr.substring(0, nameStartIndex)),
          TextSpan(
            text: _name,
            style: const TextStyle(fontWeight: FontWeight.bold),
          ),
          TextSpan(text: fullLocalizedStr.substring(nameStartIndex + _name.length)),
        ],
      ),
    );
  }
}

方案选择建议 #

• 若后续有多样式需求（比如部分文字变色、加斜体等），优先选方案1，可灵活扩展
• 若只有当前占位符加样式的简单需求，优先选方案2，代码更简洁，无额外解析逻辑

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