中文

English

中文

English

Appearance

简介 ​

UI 对象（UI Object）的文本内容可以是一段包含多种不同样式效果的文字。您可以通过 富文本（Rich Text）设置以一些简单的标签来设置文本内容中一个或连续多个字符的样式。

先决条件 ​

文本（Text）、按钮（Button）、文本框（Text Box）、开关（Toggle）、下拉框（Drop Down）控件类型都具有 富文本（Rich Text）属性，当您在 检视窗口（Inspector）中 勾选（True）富文本（Rich Text）属性，此设置会指示 SandMod 系统在文本内容中查找标记标签，并根据标签以不同样式效果显示该文本内容。

【Rich_Text001.png】

图片为 文本（Text）控件类型的 UI 对象在 检视窗口（Inspector）中

富文本格式 ​

标签格式 ​

富文本的标签系统受 HTML 的启发，但并不是与标准 HTML 严格兼容。基本思想是将文本的一部分包含在一对匹配标签内，如下案例：

Sand<b>Mod</b>

如案例所示，标签就是尖括号字符（ < 和 > ）内的文本片段。

  • 起始标签放在特定样式效果字符串的开头。标签内的文本表示标签的名称，如在本示例中标签的名称为 b（Bold）。
  • 结束标签放在特定样式效果字符串的结尾。结束标签具有与起始标签相同的名称，但是名称前面带有斜杠 / 字符。每个起始标签必须有一个对应的结束标签。如果起始标签没有对应的结束标签，则会在起始标签后的每个字符都单独按照起始标签样式效果显示。

标签不会直接显示，而是用于描述其包裹的字符串的样式。上述案例中使用的 b 标签将粗体应用于 "Mod" 字符串，因此该文本显示结果为：

【Rich_Text002.png】

标签嵌套 ​

标签与标签是支持嵌套的，这样可以将多个样式应用于文本同一部分字符串中。如下案例：

Sand<b><i>Mod</i></b>

如示例所示，i（Italic）标签表示应用斜体样式，因此该文本显示结果为：

【Rich_Text003.png】

值得注意的是，结束标签的顺序与起始标签的顺序应当相反。为了更清楚说明原因，现在让 b 标签跨越 "SandMod!" 单词和感叹号的整个文本，如下案例：

Hello <b>Sand<i>Mod</i>!</b>

该文本显示结果为：

【Rich_Text004.png】

标签参数 ​

有些标签对文本只能简单地判断哪几个字符串有该样式效果，但其他标签不仅仅是判断有该样式效果的范围，还会判断该样式具体的显示效果。例如，color 标签需要判断字符串要显示的颜色，应使用参数将显示的颜色的信息添加到标签中：

Sand<color=#FF6600FF>Mod</color>

该文本显示结果为：

【Rich_Text005.png】

其中有两点需要值得注意：

  • 结束标签不包含参数值。
  • 标签与对应参数之间不能包含空格，但是如果一个标签有多个参数，参数之间需要以空格间隔开。

支持标签 ​

SandMod 富文本支持的所有样式标签如下：

标签描述示例样式效果
b以粗体显示文本。Sand</b>【Rich_Text006.png】
i以斜体显示文本。Sand</i>【Rich_Text007.png】
d给文本添加删除线。Sand</d>【Rich_Text008.png】
u给文本添加下划线。Sand</u>【Rich_Text009.png】
size根据标签参数值设置文本的尺寸，标签参数值单位为像素。Sand</size>【Rich_Text010.png】
color根据标签参数值设置文本的颜色，标签参数值单位为 16 进制 RGBA 颜色值。（以 # 开始，第 1、2 位是 R 值，第 3、4 位是 G 值，第 5、6 位是 B 值，第 7、8 位是 A 值）Sand</color>【Rich_Text011.png】
gradient文本按照 4 个顶点的颜色值进行渐变，此标签有 4 个参数值，分别对应文本的 4 个顶点：
· lb（left bottom）左下角的颜色。
· rb（right bottom）右下角的颜色。
· lt（left top）左上角的颜色。
· rt（right top）右上角的颜色。
4 个顶点标签参数值单位均为 16 进制 RGBA 颜色值，不填写默认为白色，4 个顶点的参数值没有顺序差别。		Sand</gradient>【Rich_Text012.png】
outline设置文本的描边颜色和描边宽度。Sand</outline>【Rich_Text013.png】
on指定富文本点击事件处理函数并赋予点击事件参数值。当点击该标签所包裹的字符串时，会调用 ControlEvent.EventRichTextClick 事件响应函数，该 文本（String）类型的参数值，可以在回调函数的第二个参数中获取。Sand</on>（相关演示请参阅 富文本事件 小节）
br指定文本后面添加一个空行。Sand<【Rich_Text014.png】

富文本事件 ​

on 标签可为富文本指定某个或某几个字符拥有独特的点击事件。

值得注意的是，在 SandMod 编辑器中，一个 UI 组件类（UI Component）组件（Component）绑定的 UI 资产只能共用一个富文本点击事件函数，即使该 UI 组件类（UI Component）组件（Component）绑定的 UI 资产发生了更换或者该资产中有多个 文本（Text）等控件类型的 UI 对象（UI Object）。因此如果需要区分点击不同富文本会执行不同的事件，您需要每个 on 标签中赋予的点击事件参数值都有所区分，用于判断以跳转执行不同的事件。

富文本事件需要有以下基本操作：

  • UI 对象（UI Object）确保 富文本（Rich Text）属性已经 勾选（True）。

【Rich_Text015.png】

  • 在 内容（Content）属性中用 on 标签指定富文本中某个或某几个字符拥有点击事件。

【Rich_Text016.png】

  • 在 on 标签中添加此富文本独特的事件参数值，该值为 文本（String）类型。

【Rich_Text017.png】

示例中 "SandMod" 文本中只有 "Mod" 字符有点击事件，且事件参数值为 ModClicked：

Sand<on click=ModClicked>Mod</on>

  • 在调用该点击事件的脚本中将该富文本所属的 UI 对象（UI Object）绑定 ControlEvent.EventRichTextClick 事件响应函数。具体请参阅 API 文档关于 ControlEvent 枚举的相关内容。

示例代码：

typescript
class RichTextFunction extends Component {

    OnStart(): void {
        //获取富文本所在的 UI 画布
        let ui_component = this.gameObject.GetComponent(UIComponent);
        let cav = ui_component.canvas;

        //获取富文本所在的文本控件类型的 UI 对象
        let theText:Text = cav.FindChild(Text,"text");

        //将该富文本所属的 UI 对象绑定点击事件响应函数
        //事件中被点击的 UI 对象命名为 control，将点击事件参数值储存在命名为 paramA 的变量中。
        theText.AddEvent(ControlEvent.EventRichTextClick,
            (control:Control,paramA:String)=>{
                //尝试性打印输出事件参数值
                Debug.Log("The clicked text content is: ",paramA);
            }
        );
    };

}
  • 如有多个富文本事件，请以点击事件参数值判断执行的内容。

【Rich_Text018.png】

  • 确保该脚本和富文本对应的 UI 资产已经被场景中的 游戏对象（Game Object）中的组件所引用。

【Rich_Text019.png】

当游戏项目运行时，点击 "Mod" 字符串，控制台将输出事件参数值 ModClicked 。此输出代码可以更换成任意点击后执行的内容。

【Rich_Text020.png】