Flutter富内容本地化实现问询：解决intl包Intl.message仅返回字符串局限

官方intl的Intl.message默认仅支持返回字符串，要满足富文本本地化需求，可采用「带语义化占位符的多语言模板+运行时解析拼接」方案，既保留intl自动适配多语言语序的能力，又能自定义指定片段的样式/交互。

场景1：指定占位符为粗体样式 #

首先在intl模板中为需要加粗的片段预留语义化占位符，翻译时可自由调整占位符位置适配不同语言语序：

String helloMessage(String name) => Intl.message(
  'Hello {boldName}',
  name: 'helloMessage',
  args: [name],
  desc: '带粗体用户名的问候文案',
);
// 其他语言翻译可直接调整语序，如阿拉伯语翻译可写为 {boldName} مرحبا

运行时拆分模板拼接富文本即可：

Text.rich(
  TextSpan(
    children: () {
      final userName = "小明";
      final template = Intl.of(context).helloMessage(userName);
      final parts = template.split(userName);
      return [
        TextSpan(text: parts[0]),
        TextSpan(text: userName, style: const TextStyle(fontWeight: FontWeight.bold)),
        if (parts.length > 1) TextSpan(text: parts[1]),
      ];
    }()
  )
)

场景2：指定片段添加跳转链接 #

同样为需要加点击事件的片段预留占位符：

String termsAgreeTip(String linkText) => Intl.message(
  '我已阅读{termsLink}并同意',
  name: 'termsAgreeTip',
  args: [linkText],
  desc: '带可点击服务条款链接的同意提示文案',
);

运行时解析后给对应片段添加点击手势：

Text.rich(
  TextSpan(
    children: () {
      const linkText = '服务条款';
      final template = Intl.of(context).termsAgreeTip(linkText);
      final parts = template.split(linkText);
      return [
        TextSpan(text: parts[0]),
        TextSpan(
          text: linkText,
          style: const TextStyle(color: Colors.blue),
          recognizer: TapGestureRecognizer()..onTap = () {
            // 内部跳转服务条款页逻辑
          },
        ),
        TextSpan(text: parts[1]),
      ];
    }()
  )
)

场景3：输入框前后固定文案适配多语言语序 #

将输入框作为占位符写入intl模板，翻译时可自由调整占位符位置、按需保留单侧固定文案：

String daysTip(String inputPlaceholder) => Intl.message(
  '{input}天后到期',
  name: 'daysTip',
  args: [inputPlaceholder],
  desc: '输入框两侧带固定文案的倒计时提示',
);
// 其他语言可灵活调整语序，如英语可写为 in {input} days，仅单侧固定文案的语言可写为 {input} 天

运行时拆分模板后拼接Widget即可：

Widget buildDaysInput() {
  const placeholder = '{INPUT}';
  final template = Intl.of(context).daysTip(placeholder);
  final parts = template.split(placeholder);
  return Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      if (parts[0].isNotEmpty) Text(parts[0]),
      const SizedBox(width: 8),
      const SizedBox(width: 60, child: TextField()),
      const SizedBox(width: 8),
      if (parts.length > 1 && parts[1].isNotEmpty) Text(parts[1]),
    ],
  );
}

该方案完全兼容intl现有工作流，arb导出、多语言翻译流程无需调整，仅在渲染层做解析处理即可，改造成本极低。如果是多占位符的复杂场景，可统一用正则匹配所有{xxx}格式的占位符批量解析，无需每个场景单独写分割逻辑。

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