CocosCreator3.8研究笔记（二十）CocosCreator UI组件（四）

RichText 组件

RichText 组件是富文本控件，实际是由多个 Label 节点拼装而成，用来显示一段带有不同样式效果的文字，通过BBCode 标签来设置文字的样式。

目前支持的样式有：颜色（color）、字体大小（size）、字体描边（outline）、加粗（b）、斜体（i）、下划线（u）、换行（br）、图片（img）和点击事件（on）。


1、RichText 属性

2、BBCode 标签格式

（1）、基本格式

目前支持的标签类型有：size、color、b、i、u、img 和 on，分别用来定制字体大小、字体颜色、加粗、斜体、下划线、图片和点击事件。

每一个标签都有一个起始标签和一个结束标签，起始标签的名字和属性格式必要符合要求，且全部为小写。

结束标签的名字不做任何检查，只需要满足结束标签的定义即可。

注意：所有的 tag 名称必须是小写，且属性值是用 = 号赋值，如下：

test，test1
1

（2）、BBCode 支持的标签

（3）、img 标签的可选属性

img 标签类型提供了可选属性，可以使用 width 及 height 来指定 SpriteFrame 的大小，允许该图片可以大于或是小于行高（但此设定不会改变行高）。

当改变了 SpriteFrame 的高度或宽度后，或许会需要使用 align 来调整该图片在行中的对齐方式。

为了支持定制图片排版，还提供了 offset 属性，用于微调 SpriteFrame 在 RichText 中的位置。

设置 offset 时需注意属性值必须为整数。

（4）、标签嵌套

标签与标签是支持嵌套的，且嵌套规则跟 HTML 是一样的。比如下面的嵌套标签设置一个文本的渲染大小为 30，且颜色为绿色。

I'm green
1

也可以实现为:

I'm green
1

（5）、文本缓存

对于复杂的富文本，底层可能有十几个 label 节点，drawcall 数量会比较高，引擎为富文本组件提供了 Label 组件的文本缓存类型设置，来适当减少 drawcall 的增加。

一般情况下，不应该在游戏的主循环里面频繁地修改富文本的文本内容，这可能会导致性能比较低。

如果能不使用富文本组件，就尽量使用普通的文本组件，推荐使用 BMFont，因为 BMFont的效率是最高的。

二、RichText 组件的使用

这里以添加事件为例，进行演示：

1、新建任意一个带有 RichText 组件的节点。并创建一个自定义脚本，挂载在 RichText 组件上

这里新建了一个自定义脚本TestRichText.ts。

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

Click
1

3、复制下面的代码到TestRichText.ts中：

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

@ccclass('TestRictText')
export class TestRictText extends Component {
    start() {

    }

    update(deltaTime: number) {
        
    }

    onClicked(eventTouch:EventTouch, param:string){
        console.log("onClicked", param);
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

4、编译运行

使用鼠标点击Click文本，可以查看到控制台的输出：