富文本 RichText 组件

RichText 组件用来显示一段带有不同样式效果的文字，你可以通过一些简单的 BBCode 标签来设置文字的样式。目前支持的样式有：颜色（color）、字体大小（size）、字体描边（outline）、加粗（b）、斜体（i）、下划线（u）、换行（br）、图片（img）和点击事件（on），并且不同的 BBCode 标签是可以支持相互嵌套的。

点击 属性检查器 下面的 添加组件 按钮，然后选择 UI/Render/RichText 即可添加 RichText 组件到节点上。

RichText 属性

属性	功能
String	富文本的内容字符串，你可以在里面使用 BBCode 来指定特定文本的样式
Horizontal Align	水平对齐方式
Vertical Align	竖直对齐方式
Font Size	字体大小，单位是 point（注意：该字段不会影响 BBCode 里面设置的字体大小）
Font	富文本定制字体，所有的 label 片段都会使用这个定制的 TTF 字体
Font Family	富文本定制系统字体。
Use System Font	是否使用系统字体。
Max Width	富文本的最大宽度，传 0 的话意味着必须手动换行.
Line Height	字体行高，单位是 point
Image Atlas	对于 img 标签里面的 src 属性名称，都需要在 imageAtlas 里面找到一个有效的 spriteFrame，否则 img tag 会判定为无效。
Handle Touch Event	选中此选项后，RichText 将阻止节点边界框中的所有输入事件（鼠标和触摸），从而防止输入事件穿透到底层节点。

BBCode 标签

• 第二部分

事件

创建

我们以 on 标签作为示例，来说明下事件的用法。请在项目中新建任意一个带有 RichText 组件的节点。并创建一个自定义脚本，挂载在 RichText 组件上。

将如下的代码复制到 RichText 的 String 属性内。

<on click="onClicked" param="hello world">
  Click Me!
</on>

复制下面的代码到您的自定义脚本中：

import { _decorator, Component, EventTouch } from "cc";
const { ccclass, property } = _decorator;

@ccclass("ClickEventHandler")
export class ClickEventHandler extends Component {
  onClicked(eventTouch: EventTouch, param: string) {
    console.log("onClicked", param);
  }
}

运行

• 使用鼠标点击该文本,就可以查看输出