Flutter 国际化富文本解决方案：基于双层占位符的轻量化图文混排方案

前言

做过 Flutter 出海项目的开发者都清楚：纯文本国际化几乎没有开发门槛。但带局部高亮、图标混排的富文本国际化，一直是出海研发链路中公认的疑难问题，极易引发线上故障、拉高团队维护成本。

海外产品不仅需要适配中英文，还需兼容欧洲小语种、中东阿拉伯语这类RTL（从右至左）反向布局语种。绝大多数业务文案，都存在高亮数值、彩色标签、行内图标、风险警告等富文本诉求。目前行业两类主流实现方案：手写TextSpan拼接、文案内嵌HTML标签，均无法适配多语种差异化语序，同时存在文案代码强耦合、翻译易出错、RTL布局错乱等诸多工程问题。

为解决该行业通病，我们基于线上出海交易App，沉淀出一套标准化工程级方案：双层占位符分层架构 + 零依赖富文本解析器。无需改造官方ARB工作流、不引入第三方重型库，从根源上隔离翻译与UI，一劳永逸解决出海项目多语言富文本所有坑点。

一、问题：Flutter出海项目的致命短板

1.1 通用业务场景

几乎所有出海App，都绕不开行内富文本高亮需求：整段文案沿用全局默认样式，内部动态数值、状态标签、关键提示词配置独立样式；同时必须适配数十类语种，尤其是中东地区从右至左的RTL特殊布局。

出海高频刚需场景汇总：

任务激励：完成指定任务领取奖励，任务数值、奖励比例高亮展示；
活动运营：活动时效、参与门槛、专属福利，不同字段区分配色与标签样式；
风控提示：资金、权限类弹窗，风险关键词红色警告标注；
会员体系：等级、折扣、专属权益标签化展示；
RTL适配：阿拉伯语、希伯来语等反向语种，自动适配高亮字段位置。

核心痛点：多语种语序无统一规律、RTL布局特殊、样式不能硬编码绑定文案，传统方案完全无法规模化支撑出海业务。

1.2 传统三种方案致命缺陷

方案A：翻译文案内嵌HTML标签

直接在ARB翻译文本中嵌入HTML标签，依靠第三方富文本组件解析渲染：

plain 复制代码

"Complete <b>6</b> tasks to get rewards"

翻译成中东RTL语种后：

plain 复制代码

"<b>6</b> اكمل المهام للحصول على المكافآت"

核心弊端

协作壁垒：海外翻译人员无前端基础，极易误删、篡改标签，导致渲染白屏；
工具兼容性差：自动化出海翻译平台会误识别、转义标签，直接破坏文案结构；
RTL维护成本爆炸：反向语种语序打乱标签结构，每类语种需要单独定制文案。

方案B：代码硬编码拼接TextSpan

手动拆分纯文本，通过 RichText + TextSpan 逐段拼接实现局部样式：

dart 复制代码

RichText(
  text: TextSpan(
    children: [
      TextSpan(text: 'Complete '),
      TextSpan(text: '6', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' tasks to get rewards'),
    ],
  ),
)

核心弊端

文案与业务代码强耦合，出海项目动辄十几种语种，语序各不相同；修改一句文案、新增一个语种都需要重构排版代码，无法统一维护，是出海项目架构红线。

方案C：通用字符串模板引擎

借助第三方模板引擎，使用命名占位符做字符串替换：

plain 复制代码

"Complete {{taskCount}} tasks to get rewards"

核心弊端

生态冲突：Flutter ARB官方国际化体系仅支持数字索引占位符，无法直接兼容命名占位符；
能力缺失：仅支持简单字符串替换，不支持图标、圆角标签等出海高频富文本样式；
包体积负担：引入重型第三方库，增加海外包体积，影响转化下载率。

1.3 出海项目核心矛盾总结

出海项目研发链路中，翻译团队、客户端开发、业务产品三方诉求相互制约，传统方案无法同时满足：

翻译侧：文案纯文本、无任何特殊标签、占位符不可被篡改、可自由调整位置适配RTL；
开发侧：语义化变量易维护、声明式配置样式、一套模板适配全球语种、支持图标/标签混排；
业务侧：动态绑定服务端数据、数据驱动样式、低维护成本、线上运行零崩溃。

破解出海富文本难题的唯一解：双层占位符分层设计，隔离翻译层与UI渲染层，各司其职互不干扰。为方便大家直观理解，这里简单举一个对照案例：

简易案例对照

翻译层（ARB存储）：订单预计 {``{0}} 分钟内完成，奖励{``{1}}积分

中间转换层：根据业务变量自动映射 订单预计 [[time]] 分钟内完成，奖励[[score]]积分

开发渲染层：绑定time普通文本样式、score高亮标签样式，一行代码完成渲染，翻译人员全程无需接触任何样式逻辑。

二、整体架构：三层分层解耦设计

2.1 架构总览

整套方案自上而下分为 翻译层、变量模板层、UI渲染层，数据单向流转、层级完全解耦，无跨层依赖，专门适配出海多语种项目：

翻译层（ARB文件） ：使用纯数字索引占位符 {``{0}}，交由翻译团队维护，屏蔽所有样式逻辑，从根源杜绝翻译出错；
变量模板层（中间转换层） ：将索引占位符映射为语义化标记 [[field]]，面向开发者做样式绑定与数据填充；
UI渲染层（Widget）：解析标记模板，自动拆分文本，实现普通文案+彩色标签+图标组件混排，原生兼容RTL布局。

2.2 补充底层原理

很多开发者疑惑：为什么原生 RichText 很难直接实现国际化富文本混排？这里补充底层渲染逻辑，帮大家吃透原理：

Flutter 中 RichText 依赖 InlineSpan 作为子节点，包含两类核心子类：

TextSpan：仅用于渲染纯文本，支持字体、颜色、粗细等文字样式，轻量化、渲染性能极高；
WidgetSpan：官方提供的行内组件容器，允许嵌入任意自定义Widget（图标、圆角标签、小型按钮）。

这也是原生框架的核心痛点：WidgetSpan 存在基线对齐原生BUG，默认渲染状态下行内组件会出现文字下沉、上下错位；同时官方未提供任何富文本模板解析能力，所有复杂排版都需要开发者手动拆分、拼接Span，多语种场景下维护成本呈指数级增长，这也是出海富文本适配长期无解的底层原因。

本解析器针对性做两大底层优化：内置基线对齐修复方案 + 自研全自动文本拆分算法，彻底屏蔽原生底层BUG，开发者无需关心渲染细节，开箱即用。

2.3 双层占位符设计逻辑（出海核心）

翻译层 {{0}} 索引占位符

无实际语义，翻译人员/自动化工具无法篡改，适配海外翻译团队；
支持翻译自由调整占位符位置，完美适配中东RTL反向语种；
100%兼容ARB官方标准，零侵入改造现有出海项目。

变量层 $\[field$ ] 自定义标记

符号差异化极强，开发阶段快速区分翻译占位符与样式标记；
正则解析简单，解析耗时毫秒级，列表场景无性能压力；
语义化变量命名，代码可读性拉满，降低多人协作维护成本。

补充说明：Flutter ARB 原生国际化语法使用单大括号 {0} 作为占位符，会被官方 gen-l10n 工具自动解析并生成代码入参。

本文统一采用双大括号 {{0}} 是刻意设计：让官方国际化工具将其识别为普通文本，不做参数解析，彻底绕开原生占位符逻辑。

如此一来，ARB 文件全程保持纯文本形态，翻译流程不受干扰；同时和后续代码层的 $\[field$ ] 语义标记形成明显符号区分，避免解析冲突，保障双层占位符架构正常运行。

三、API 设计（规范化命名）

3.1 一站式顶层入口（90%出海场景首选）

全局统一入口，一行代码完成占位符转换、变量映射、模板解析、富文本渲染全流程，适配所有海外业务页面：

dart 复制代码

GlobalI18nRichParser.parse(
  source: '会员礼包包含 {{0}} 份，价值 {{1}} 积分，有效期{{2}}',
  variables: {
    'count': '6',
    'score': '1000',
    'day': '2',
  },
  highlightKeys: ['score', 'day'],
  widgetBuilders: {
    'score': (value) => Container(
      padding: EdgeInsets.symmetric(horizontal: 6, vertical: 2),
      decoration: BoxDecoration(
        color: Colors.green,
        borderRadius: BorderRadius.circular(4),
      ),
      child: Text(value, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
    ),
    'day': (value) => Text(
      value,
      style: TextStyle(color: Colors.orange, fontWeight: FontWeight.bold),
    ),
  },
  defaultTextStyle: TextStyle(fontSize: 14,color: Color(0xff333333)),
);

3.2 完整底层API矩阵

对外API	入参结构	返回值	适用场景
parse	索引文案 + 变量Map	Widget	通用一站式快速开发（出海首选）
parseTemplate	标记模板文案	Widget	自定义静态富文本模板
parseTemplateWithVars	模板+变量	Widget	模板与数据源解耦
buildTextSpanList	标记模板	List<TextSpan>	仅纯文字样式排版
convertPlaceholderToTag	索引翻译文案	String	调试、获取中间模板

3.3 全局样式工厂方法

封装全站出海高频通用样式，统一海内外UI风格，减少重复编码：

dart 复制代码

GlobalI18nRichParser.createStylePool(
  primaryTag: {'score'},     // 绿色圆角高亮标签
  emphasisText: {'title'},   // 蓝色加粗强调文字
  warningText: {'deadline'}, // 红色警告提示文字（风控专用）
  customBuilder: {'icon': (v) => BusinessCommonIcon()},
);

四、核心解析文件详解（i18n_rich_parser.dart）

4.1 文件整体定位

本章聚焦解析器唯一核心文件i18n_rich_parser.dart，从文件定位、模块拆分、类结构、执行链路、方案优势、底层核心能力六个维度，由浅入深讲解整体设计思路。全文所有代码片段均做脱敏裁剪，仅展示核心算法逻辑，不提供完整可直接投产源码，规避版权问题，仅用于技术学习与原理分析。

该文件是整套富文本国际化方案的唯一载体，统筹占位符转换、文本解析、样式绑定、富文本渲染全部能力，完美解耦ARB翻译文案、业务页面、UI样式三者之间的强耦合关系。开发者仅引入该单个文件，即可实现多语种富文本统一渲染，无需改造项目原有国际化架构。

文件承载三大核心职能：

占位符分层转换 ：实现翻译层 {``{0}} 数字索引占位符，自动映射为开发层 [[field]] 语义化标记；
结构化文本解析：依托正则线性遍历算法，智能拆分静态纯文本与自定义样式标记，输出标准化片段数据；
统一渲染封装：封装原生TextSpan/WidgetSpan创建逻辑，内置官方基线BUG修复方案，配套全局样式池，对外暴露极简API。

4.2 文件内部模块划分

内部采用业内成熟的「静态工具类 + 私有数据实体」架构，自上而下拆分为四大低耦合模块，职责单一、边界清晰，便于后期迭代维护、新增功能特性：

数据实体模块 ：私有 _TextSegment 内部模型，专门用于区分存储普通纯文本、自定义样式标记两类数据片段；
占位符转换模块：静态工具方法，适配ARB原始多语言文案，完成双层占位符单向转换；
文本拆分模块：O(n)线性遍历正则算法，拆分完整文案，适配列表高频渲染场景，性能零损耗；
富文本渲染模块：对外统一入口，整合占位符转换、文本解析、样式匹配、Span组装、BUG修复全链路。

4.3 顶层类结构（示意）

以下为脱敏后的完整顶层结构，剔除业务私有边界处理、异常捕获等冗余代码，仅保留类定义、全局属性、核心成员方法与数据实体，直观展示代码组织架构：

dart 复制代码

/// 全局国际化富文本解析静态工具类
/// 文件路径：core/widget/i18n_rich_parser.dart
class GlobalI18nRichParser {
  // 全局样式统一配置池，管控全站富文本样式
  static StyleConfig? _globalStylePool;

  // 对外一站式顶层入口（90%业务场景直接调用）
  static Widget parse({/* 入参整体省略 */});

  // 核心方法：索引占位符 => 语义化标记转换
  static String convertPlaceholderToTag({/* 入参整体省略 */});

  // 底层私有：文本拆分，生成结构化片段数组
  static List<_TextSegment> _splitTextSegment(String content);

  // 底层私有：组装InlineSpan，修复WidgetSpan基线错位BUG
  static List<InlineSpan> _buildInlineSpan({/* 入参整体省略 */});

  // 全局样式池初始化，统一配置高亮/警告/自定义组件样式
  static void createStylePool({/* 入参整体省略 */});
}

/// 内部私有实体：结构化存储文本片段
class _TextSegment {
  final String content;
  final bool isCustomTag; // true=自定义标记，false=普通文本
  _TextSegment({required this.content, required this.isCustomTag});
}

/// 全局样式配置实体：统一收纳所有富文本样式规则
class StyleConfig {
  Set<String> primaryTagKeys;
  Set<String> warningTextKeys;
  Map<String, WidgetBuilder> customWidgetMap;
  // 构造方法、赋值逻辑省略
}

4.4 核心执行闭环链路

开发者调用顶层 parse() 方法后，解析器内部自动执行标准化4步闭环，全程无需开发者感知底层细节：

占位符替换 ：读取ARB原始国际化文案，按照变量入参顺序，将 {``{0}}/{``{1}} 索引占位符映射为[[field]] 语义化标记；
文本智能拆分 ：调用私有 _splitTextSegment 方法，将完整文案拆分为「静态文本+样式标记」结构化数组；
样式自动绑定：遍历结构化片段，匹配开发者传入的高亮Key、自定义组件构造器，绑定对应UI样式；
组件统一渲染：校正WidgetSpan原生基线偏移BUG，组装TextSpan/WidgetSpan，最终输出可直接使用的RichText组件。

4.5 方案核心设计优势

极低接入成本：单文件聚合所有能力，无第三方依赖、无侵入改造，出海项目5分钟即可完成接入；
高拓展易维护：新增样式、渲染规则仅迭代底层渲染模块，上层业务调用代码无需变更；
高内聚低耦合：底层数据模型、工具方法全部私有化，仅暴露极简API，从根源规避开发者误用；
出海场景专属优化：解析逻辑与语种完全解耦，原生兼容中文、欧美小语种、中东RTL反向布局语种。

4.6 三大底层核心能力（脱敏核心片段）

本节放出解析器最核心的三段底层算法，全部做脱敏精简，删除冗余边界校验、异常捕获代码，仅保留核心执行逻辑，供大家学习参考：

4.6.1 文本拆分解析算法

采用线性遍历方案，时间复杂度O(n)，内存占用低，完美适配Feed流、ListView长列表高频重建场景：

dart 复制代码

static List<_TextSegment> _splitTextSegment(String content) {
  final segmentList = <_TextSegment>[];
  final tagRegex = RegExp(r'\[\[([^\]]+)\]\]');
  int lastMatchEnd = 0;
  for (final match in tagRegex.allMatches(content)) {
    if(match.start > lastMatchEnd){
      segmentList.add(_TextSegment(
        content: content.substring(lastMatchEnd, match.start),
        isCustomTag: false,
      ));
    }
    segmentList.add(_TextSegment(content: match.group(1)!, isCustomTag: true));
    lastMatchEnd = match.end;
  }
  return segmentList;
}

4.6.2 双层占位符转换逻辑

打通ARB官方翻译层与开发渲染层，实现翻译与UI彻底解耦，适配所有出海语种：

dart 复制代码

static String convertPlaceholderToTag({
  required String sourceText,
  required Map<String,dynamic> variables,
  List<String>? highlightKeys,
}){
  String result = sourceText;
  final highlightSet = highlightKeys?.toSet() ?? {};
  final keyList = variables.keys.toList();
  for(int i=0;i<keyList.length;i++){
    final varKey = keyList[i];
    final placeholder = '{{$i}}';
    final replaceStr = highlightSet.contains(varKey) ? '[[$varKey]]' : variables[varKey].toString();
    result = result.replaceAll(placeholder, replaceStr);
  }
  return result;
}

4.6.3 WidgetSpan基线BUG官方最优修复

根治出海项目高频疑难BUG：行内组件文字下沉、RTL布局组件错位，全网通用最优解决方案：

dart 复制代码

/// 修复Flutter原生WidgetSpan基线对齐缺陷
InlineSpan buildCustomSpan(String value, WidgetBuilder builder) {
  return WidgetSpan(
    alignment: PlaceholderAlignment.baseline,
    baseline: TextBaseline.alphabetic,
    child: builder.call(value),
  );
}

五、线上通用落地案例

5.1 基础案例：会员成长提示（全语种通用）

dart 复制代码

final hintText = GlobalI18nKit.of(context)!.member_growth_tip;
final richWidget = GlobalI18nRichParser.parse(
  source: hintText,
  variables: {'target':'480000','level':'Lv6'},
  highlightKeys: ['target'],
  widgetBuilders: {
    'target':(val)=>Text(val,style:TextStyle(color:Colors.green,fontWeight:FontWeight.bold)),
  },
  defaultTextStyle: TextStyle(color:Color(0xff666666),fontSize:14),
);

5.2 高阶案例：RTL阿拉伯语种完整落地（出海核心）

这是出海项目最容易踩坑的场景：中东阿拉伯RTL反向语种，下面给大家展示从ARB文案→翻译→解析渲染的完整闭环案例，也是线上真实投产业务：

1）中文源文案（ARB）

plain 复制代码

完成 {{0}} 笔交易，即可解锁 {{1}} 专属会员权益

2）阿拉伯语翻译（RTL，翻译自由调换占位符顺序）

plain 复制代码

يمكنك فتح {{1}} من خلال إكمال {{0}} صفقات

3）业务侧调用（无需适配语种、无需修改代码）

dart 复制代码

// 自动读取当前设备语种，中文/阿拉伯语自动适配
final businessText = GlobalI18nKit.of(context)!.trade_vip_tip;
final richWidget = GlobalI18nRichParser.parse(
  source: businessText,
  variables: {'tradeNum':'5','privilege':'VIP'},
  highlightKeys: ['privilege'],
  widgetBuilders: {
    'privilege':(val)=>Container(
      padding: EdgeInsets.symmetric(horizontal: 8,vertical:2),
      decoration: BoxDecoration(color: Colors.purple,borderRadius: BorderRadius.circular(10)),
      child: Text(val,style: TextStyle(color: Colors.white)),
    ),
  },
  defaultTextStyle: TextStyle(fontSize:14,color: Colors.black87),
);

案例总结：RTL语种语序完全打乱，开发者无需写任何兼容代码，解析器内部自动适配反向布局、自动校正WidgetSpan基线；翻译仅需调整占位符位置，彻底解决中东市场适配难题。

5.3 高阶案例：数据驱动动态样式（风控场景）

根据业务风控状态，动态切换警告色，适配出海资金类弹窗、风险提示文案：

dart 复制代码

final bool isReachTarget = currentValue >= targetValue;
final Map<String,WidgetBuilder> dynamicStyle = {
  'current':(val)=>Text(
    val,
    style:TextStyle(color: isReachTarget?Colors.green:Colors.red,fontWeight:FontWeight.bold)
  )
};

六、ARB国际化工作流集成

6.1 ARB文件示例

中文ARB：

json 复制代码

{
  "@@locale": "zh",
  "member_growth_tip": "累计完成 {{0}} 活跃度，即可升级至 {{1}}",
  "@member_growth_tip": {
    "description": "会员等级升级提示，0=活跃度，1=目标等级"
  }
}

6.2 出海团队标准化协作流程

环节	负责人	工作内容
文案录入	开发者	ARB写入带数字索引占位符的纯文案，不写任何样式
多语言翻译	海外翻译组	自由调整占位符位置，适配各国语种/RTL布局
样式渲染	开发者	绑定动态数据、配置高亮/图标样式，一键渲染

七、主流出海方案横向对比

7.1 综合对比总结

对比维度	手写TextSpan	HTML解析方案	本文轻量解析器
代码耦合度	极高（出海噩梦）	中等	极低（翻译UI完全解耦）
第三方依赖	无	有（增加包体积）	无（纯原生Dart极简实现）
RTL语种适配	极差，需单独开发	一般，易布局错乱	原生适配，零额外开发
翻译容错率	普通	极低，极易损坏标签	100%安全，无法篡改占位符
渲染能力	仅文字样式	受HTML标签限制	支持图标/标签/按钮任意组件混排

八、质量保障与性能分析

8.1 单元测试覆盖

覆盖普通填充、高亮渲染、特殊字符、空值、连续占位符五大边界场景，App线上零崩溃：

dart 复制代码

test('关键字段高亮-单字段',(){
  final result = GlobalI18nRichParser.convertPlaceholderToTag(
    sourceText: '当前进度：{{0}}/{{1}}',
    variables: {'current':20,'total':100},
    highlightKeys: ['current'],
  );
  expect(result,'当前进度：[[current]]/100');
});

8.2 性能指标

解析性能：300字符以内出海常规文案，单次解析耗时＜0.1ms；
渲染性能：底层基于原生TextSpan/WidgetSpan，性能与官方组件持平；
出海优化建议：长列表/Feed流页面，对解析结果做记忆化缓存，彻底消除重建开销。

九、限制与出海最佳实践

9.1 已知限制

暂不支持嵌套标签[[outer [[inner]]]]（出海业务无高频需求，可后续迭代）；
变量内容禁止包含 ]] 特殊字符，海外特殊语种内容需提前转义；
Wrap容器对齐模式不支持stretch/baseline，会自动优雅降级。

9.2 出海项目最佳实践

变量统一使用英文驼峰命名，适配全球多语种编码规范；
单句文案高亮字段不超过3个，符合海外用户阅读习惯；
全站富文本样式交由样式工厂统一管理，海内外UI风格统一；
异步接口未返回数据时，优先展示骨架屏，规避海外用户空白文案差评问题。

十、总结

针对 Flutter 出海项目多语言富文本适配乱象，本文结合中文、欧美小语种、阿拉伯RTL反向语种三大类真实线上业务案例，自研纯原生零依赖轻量化解析器。创新性提出双层占位符分层架构，从架构根源上解决翻译易报错、UI与文案强耦合、RTL语种适配困难三大行业痛点，为出海团队提供标准化工程级解决方案。

方案核心优势，精准解决出海开发者痛点：

翻译完全解耦：{{0}}纯数字占位符隔离所有样式逻辑，翻译团队只负责纯文本，从此0翻译事故；
全语种原生适配：天然支持中英文、小语种、中东RTL反向布局，一套模板通吃全球；
轻量化无侵入：零第三方依赖、纯原生Dart极简实现、兼容官方ARB工作流；
工程级落地：经过出海交易App线上验证；

如果你正在开发 Flutter 出海项目，被多语言富文本排版、RTL布局适配、翻译文案耦合等问题困扰，这套经过线上用户验证的标准化方案，就是当前Flutter出海生态内的最优解。欢迎评论区交流出海适配踩坑经验。

本文为一线金融移动端工程实践总结，持续分享架构、性能、稳定性相关技术内容，欢迎交流~ Github: https://github.com/brycegao

Flutter 国际化富文本解决方案：基于双层占位符的轻量化图文混排方案

前言

一、问题：Flutter出海项目的致命短板

1.1 通用业务场景

1.2 传统三种方案致命缺陷

方案A：翻译文案内嵌HTML标签

方案B：代码硬编码拼接TextSpan

方案C：通用字符串模板引擎

1.3 出海项目核心矛盾总结

二、整体架构：三层分层解耦设计

2.1 架构总览

2.2 补充底层原理

2.3 双层占位符设计逻辑（出海核心）

翻译层 {{0}} 索引占位符

变量层 \[field] 自定义标记

三、API 设计（规范化命名）

3.1 一站式顶层入口（90%出海场景首选）

3.2 完整底层API矩阵

3.3 全局样式工厂方法

四、核心解析文件详解（i18n_rich_parser.dart）

4.1 文件整体定位

4.2 文件内部模块划分

4.3 顶层类结构（示意）

4.4 核心执行闭环链路

4.5 方案核心设计优势

4.6 三大底层核心能力（脱敏核心片段）

4.6.1 文本拆分解析算法

4.6.2 双层占位符转换逻辑

4.6.3 WidgetSpan基线BUG官方最优修复

五、线上通用落地案例

5.1 基础案例：会员成长提示（全语种通用）

5.2 高阶案例：RTL阿拉伯语种完整落地（出海核心）

5.3 高阶案例：数据驱动动态样式（风控场景）

六、ARB国际化工作流集成

6.1 ARB文件示例

6.2 出海团队标准化协作流程

七、主流出海方案横向对比

7.1 综合对比总结

八、质量保障与性能分析

8.1 单元测试覆盖

8.2 性能指标

九、限制与出海最佳实践

9.1 已知限制

9.2 出海项目最佳实践

十、总结

变量层 $\[field$ ] 自定义标记