虚幻示意图形(UMG)中提供的文本块带来了各种各样的样式选项和自定义。但是,你可能需要更灵活的文本块选项,以支持标记样式更改、内联图像、超链接等功能。
UMG RichTextBlock 提供了一种更为灵活的文本块。它支持标记样式更改、内联图像、超链接等功能。UMG RichTextBlock接受装饰器类,你可以编写这些类来定义项目中需要的标记行为。此外,页面显示了有关属性的详细信息,你可以使用富图像行和富文本样式行数据类型设置到RichTextBlock控件和数据表资产。
RichTextBlock 使用 数据表资产(Data Table Asset) 管理添加的样式和自定义。借助于数据表资产,你将能够创建你自己的样式。此外,它还允许你编写自定义装饰器类,以定义项目中需要的标记行为。页面显示了装饰器类 RichTextBlockImageDecorator 的示例。你可以将其用作体验编写自定义装饰器类的起始点。
熟悉页面内容,以详细了解UMG中的RichTextBlock,以及如何编写自定义装饰器类。
创建和分配数据表资产
首先,你应该创建数据表资产。借助于数据表资产,你将能够创建不同类型的数据标签,并用于UMG中的RichTextBlock控件。你可以使用数据表资产来指定文本样式或图像,你可以通过RichTextBlock使用富文本以内联方式使用它们。
像其他资产那样创建数据表资产:点击 内容浏览器(Content Browser) 中的 新增(Add New) ,然后选择 杂项(Miscellaneous)> 数据表(Data Table) 。

在 选取行结构(Pick Row Structure) 窗口中选择 富图像行(Rich Image Row) 或 富文本样式行(Rich Text Style Row) 。

富图像行使用自定义装饰器类,你可以在装饰器类小节中详细了解装饰器类。
富图像行数据类型
页面显示了富图像行数据类型示例,这是一个自定义装饰器类。将数据表资产用于富图像行数据类型,存储图像并通过不同的自定义选项进行设置。因此,你可以通过RichTextBlock将此数据用作文本中的内联图像。
执行下面的步骤,创建和使用数据表资产的富图像行数据类型。
- 创建数据表资产,从 选取行结构(Pick Row Structure) 窗口的下拉列表中选择 富图像行(Rich Image Row) 。此外,你还可以重命名此数据表资产。例如,采用名称"Image_DataTable"。
- 在内容浏览器中双击已创建的数据表资产,以在 数据表编辑器(Data Table Editor) 中将其打开。
-
点击数据表资产面板中的 添加(Add) 以添加新行。在数据表资产中为每个内联图像创建行,这些行将通过RichTextBlock用于你的文本。有其他工具可以处理数据表资产面板中的行,例如:复制(Copy) 、 粘贴(Paste) 、 复制(Duplicate) 、 删除(Remove) 。
- 你可以通过 行名称(Row Name) 分段的文本字段更改行名称。该名称允许使用前缀、大小写混合,等等。
- 在 外观(Appearance) 下设置这些图像所需的属性。
- 添加行完成后,点击 保存(Save) 并关闭数据表资产。
请参阅富图像行数据类型的数据表资产的属性,详细了解这些设置。
富文本样式行数据类型
富文本样式行数据类型是默认装饰器类。借助于此类,你可以设置文本样式,以便通过RichTextBlock应用于文本。
执行下面的步骤,创建和使用数据表资产的富文本样式行数据类型。
- 创建数据表资产,从选取行结构(Pick Row Structure)窗口的下拉列表中选择 富文本样式行(Rich Text Style Row) 。此外,你还可以重命名此数据表资产。例如,采用名称"TextStyle_DataTable"。
- 在内容浏览器中双击已创建的数据表资产,以在数据表编辑器中将其打开。
-
点击数据表资产面板中的 添加(Add) 以添加新行。在数据表资产中为每个文本样式创建行,这些行将通过RichTextBlock用于你的文本。有其他工具可以处理数据表资产面板中的行,例如:复制(Copy) 、 粘贴(Paste) 、 复制(Duplicate) 、 删除(Remove) 。
-
你可以在行名称(Row Name)分段的文本字段中更改每行的名称。该名称允许使用前缀、大小写混合,等等。
推荐将数据表资产的第一行重命名为"Default"。因此,你已将此行的样式定义为分配的RichTextBlock中文本的默认样式。
- 在外观(Appearance)下设置这些样式所需的属性。
- 添加行完成后,点击保存(Save)并关闭数据表资产。
请参阅富文本样式行数据类型的数据表资产的属性,详细了解这些设置。
要正确显示文本,需要在数据表资产中为每个富文本样式行设置字体。打开数据表编辑器。你应该选择你想自定义的文本行,然后访问行编辑器的 外观(Appearance)> 文本样式(Text Style)> 字体(Font) 分段。在新窗口中,你需要点击 齿轮 并启用 显示引擎内容(Show Engine Content) 。借助于此项,你将能够选择 Roboto 字体或你所需的其他字体。
在UMG UI设计器中使用富文本块控件
你应该使用已创建的数据表资产分配RichTextBlock控件因此,你将能够通过 设计器视口(Designer Viewport) 使用数据表资产中配置的文本样式和内联图像。
添加富文本块控件
创建控件蓝图:点击内容浏览器中的 新增(Add New) ,然后选择 用户界面(User Interface)> 控件蓝图(Widget Blueprint) 。

你应该会在左侧的 控制板(Palette) 面板中找到 画布面板(Canvas Panel) 。将画布面板拖入设计器视口中。在控制板面板中找到 RichTextBlock ,将此控件拖入设计器视口的画布面板框中。你可以根据需要缩放RichTextBlock或调整大小。

文本框不会自动缩放以适应文本大小。如果你不调整框的大小以适应文本大小,一些文本可能会被裁剪,无法正确显示。此外,你还可以在细节(Details)面板中启用 根据内容设置(Set to Content) 分段的复选框,以自动根据内容调整文本框大小。
将数据表资产分配给富文本块
选择添加的RichTextBlock控件。借助于右侧的 细节(Details) 面板,你能够将数据表资产分配给外观(Appearance)分段中的RichTextBlock。
使用 文本样式集(Text Style Set) 将带有富文本样式行的数据表资产分配给RichTextBlock。

将样式应用于文本
如前所述,你应该将数据表资产分配给RichTextBlock。执行下面的步骤,将数据表资产中的样式应用于文本。
- 选择RichTextBlock。
- 在右侧的细节(Details)面板中找到 内容(Content) 分段。
- 将你的文本输入到 文本(Text) 分段的文本字段中。
显示文本采用数据表资产中名为"Default"的行中的样式。例如,如果你在文本字段中输入了"This is some rich text!",它将使用你在数据表资产的"Default"行中自定义的样式显示。
你可以更改你在数据表资产中定义的RichTextBlock的默认文本样式。在细节(Details)面板中启用 覆盖默认样式(Override Default Style) 分段的复选框。因此,你将能够在 默认文本样式覆盖(Default Text Style Override) 分段中自定义新的默认文本样式。
如果你需要数据表资产中的其他样式,请使用标记 <TextStyleRowName>text</>
(其中,"TextStyleRowName" 是你分配的数据表资产的文本样式行名称,"text" 是你想采用指定行中样式的文本部分),在封闭的括号内输入样式行的名称。例如:This is some <RichText.Emphasis>rich</> text!
你可以为文本的不同部分应用不同的样式。
提示:RichTextBlock中的行名称标签对于数据表资产行名称不区分大小写。
装饰器类
你可以使用 装饰器类 在文本中包含样式之外的其他内容。创建装饰器类时,你可以设置自己的标记标签。借助于此项,你将能够使用Slate。它允许你在文本中无缝地渲染其他元素。
使用装饰器
页面举例说明了如何通过 RichTextBlockImageRowDecorator 类在文本中包含内联图像。该示例可帮助你开始使用自定义装饰器类。
你需要具备富图像行数据类型的已创建数据表资产(请参阅上面的创建和分配数据表资产小节),以及RichTextBlockImageRowDecorator 父类 的子类 蓝图类 作为蓝图来配置实例。为此,执行下面的步骤:
-
创建新蓝图类:点击内容浏览器中的 新增(Add New) ,然后选择 蓝图类(Blueprint Class) 。
-
在 选取父类(Pick Parent Class) 窗口中选择 RichTextBlockImageRowDecorator 并点击 选择(Select) 。
- 在内容浏览器(Content Browser)中双击已创建的蓝图类,在 蓝图编辑器(Blueprint Editor) 中打开。
-
借助于右侧的细节(Details)面板,通过 图像集(Image Set) 将此蓝图类分配给富图像行数据类型的数据表资产。
完成上面列出的所有操作后,你能够将装饰器类添加到RichTextBlock控件。执行下面的步骤,以在文本中使用数据表资产中的内联图像。
- 打开控件蓝图。
- 在右侧的细节(Details)面板中的外观(Appearance)下找到 装饰器类(Decorator Classes) 分段。
- 点击 (+) 按钮,将数组元素添加到装饰器类。
-
在下拉列表中选择已创建的蓝图类。
若要插入数据表资产中的内联图像,你应该在细节(Details)面板的内容(Content)分段中使用标记 <img id="ImageRowName"/>
(其中 "ImageNameFromTable" 是你分配的数据表资产的行名称)。例如,如果你在文本字段中输入了 With <img id="RichText.Logo"/> inline images!
,并点击 编译(Compile) ,它会使用你在数据表资产中名为"RichText.Logo"的行自定义的内联图像显示文本。
添加新装饰器
你可以定义自定义装饰器类,它们可以利用Slate添加你想内联该文本的内容。为此,你应该编写两个类:URichTextBlockDecorator
和 FRichTextDecorator
。你应该设置这些类。因此,你将能够将装饰器添加到任意RichTextBlock。使用装饰器类数组和你的标记,通过你的装饰器解析文本。
URichTextBlockDecorator
定义了 UObject
来实现 CreateDecorator
,它应该返回指向 FRichTextDecorator
的 SharedPtr
。因此,你可以实现任意属性和工具函数。此外,你可以为你的装饰器创建子类作为蓝图。它允许添加和使用你在RichTextBlock中需要的数据。
记住,RichTextBlockImageDecorator
定义了数据表属性。你想在蓝图中修改的内容都应该存在于 UObject
中。
UMG富文本块的设置
此参考小节显示了有关属性的详细信息,你可以使用富图像行和富文本样式行数据类型设置到RichTextBlock控件和数据表资产。
富文本块属性
属性 | 说明 |
---|---|
插槽(画布面板插槽) | |
锚点(Anchors) | 这会设置所选控件的锚点位置。
|
对齐(Alignment) | 对齐是控件的枢轴点。开始于左上角的(0,0),结束于右下角的(1,1)。移动对齐点,你就可以移动控件的原点。 |
根据内容设置大小(Size To Content) | AutoSize为true时,使用控件所需的大小。 |
ZOrder | 这将表明渲染所选控件时的顺序优先级。值越大,渲染越晚,最晚的显示在顶部。值越小,渲染越早,最早的显示在底部。 |
内容 | |
文本(Text) | 这是要在控件中显示的文本。 |
外观 | |
文本样式集(Text Style Set) | 这会保存数据表资产,支持将富文本装饰器用于文本和图像样式。 |
装饰器类(Decorator Classes) | 这会添加可用于所选控件的装饰器。 |
覆盖默认样式(Override Default Style) | 如果设置为true,它以内联方式指定此富文本的默认文本样式,覆盖样式集表中提供的默认值。 |
默认文本样式覆盖(Default Text Style Override) | 这会设置默认情况下要应用的文本样式。 |
最小所需宽度(Min Desired Width) | 这会为文本设置最小所需大小。 |
变换策略(Transform Policy) | 要应用于此文本块的文本变换策略。
|
对齐方式(Justification) | 这会设置文本与边距对齐的方式。 |
边距(Margin) | 这会设置文本区域边缘周围空白区的大小。 |
行高百分比(Line Height Percentage) | 这会设置每个行高的缩放量。 |
裁剪 | |
裁剪(Clipping) | 控制此控件的裁剪行为。正常情况下,溢出控件边界的内容会继续渲染。启用裁剪会防止溢出的内容被看到。
不同裁剪空间中的元素无法批处理,因此应用裁剪时有性能成本。除非面板实际上需要防止在边界之外显示内容,否则不要启用裁剪。 |
溢出策略(Overflow Policy) | 设置在文本被裁剪以及不适应此控件的裁剪矩形时对文本执行的操作。
|
换行 | |
文本自动换行(Auto Wrap Text) | 如果设置为true,它会根据为控件计算的水平空间自动将文本换行。 |
文本换行宽度(Wrap Text At) | 这将确定文本在其长度超过此宽度时是否换到新行。如果此值为零或负数,则不发生换行。 |
换行策略(Wrapping Policy) | 要使用的换行策略:
|
行为 | |
提示文本(Tool Tip Text) | 用户将鼠标光标悬停在控件上时显示的提示文本。 |
启用(Is Enabled) | 这将设置此控件是否可以由用户交互式修改。 |
可视性(Visibility) | 设置此控件的可视性。
|
渲染不透明度(Render Opacity) | 这会设置控件的不透明度。 |
提示文本控件(Tool Tip Widget) | 用户将鼠标光标悬停在控件上时显示的提示文本控件。 |
光标(Cursor) | 鼠标在控件上方时要显示的光标。
|
渲染变换 | |
变换(Transform) | 控件的渲染变换允许将任意2D变换应用于控件。
|
枢轴点(Pivot) | 渲染变换枢轴点控制应用变换的位置。该值是发生旋转等操作所围绕的规格化坐标。 |
性能 | |
易变(Is Volatile) | 如果设置为true,这将防止缓存控件或其子项的几何体或布局信息。如果此控件每个帧都会发生变化,但你想让它仍位于无效面板中,则应该将其标记为易变,而不是每一帧使其失效。它会让无效面板实际上不缓存任何内容。 |
导航 | |
左(Left) | 定义使用左(Left)时的导航:
|
右(Right) | 定义使用右(Right)时的导航:
|
上(Up) | 定义使用上(Up)时的导航:
|
下(Down) | 定义使用下(Down)时的导航:
|
下一步(Next) | 定义使用下一步(Next)时的导航:
|
上一步(Previous) | 定义使用上一步(Previous)时的导航:
|
本地化 | |
强制方向偏好(Force Direction Preference) | 将其用于设置新的流方向。
|
文本塑形方法(Text Shaping Method) | 它将确定所选控件中使用的文本塑形方法。如果未设置,将使用获取默认文本塑形方法(Get Default Text Shaping Method)设置的默认值。
|
文本流方向(Text Flow Direction) | 它将确定所选控件中使用的流方向。如果未设置,将使用获取默认文本流方向(Get Default Text Flow Direction)设置的默认值。
|
富图像行数据类型的数据表资产的属性
在数据表资产中设置以下属性,以控制用于RichTextBlock控件的图像样式。
属性 | 说明 |
---|---|
图像(Image) | 要为此笔刷渲染的图像。分配的资产可以是UTexture、UMaterialInterface或实现AtlasedTextureInterface的对象。 |
图像大小(Image Size) | 资源的大小(按Slate单位)。 |
色调(Tint) | 应用于图像的色调。 |
绘制为(Draw As) | 如何绘制图像。
|
平铺(Tiling) | 如何在图像模式下平铺图像。
|
预览(Preview) | 设置图像应该如何显示在预览框中。 水平对齐(Horizontal Alignment):
垂直对齐(Vertical Alignment):
|
富文本样式行数据类型的数据表资产的属性
在数据表资产中设置以下属性,以控制用于RichTextBlock控件的文本样式。
属性 | 说明 |
---|---|
字体 | |
字体系列(Font Family) | 字体对象(从UMG或Slate控件样式资产使用时有效)。 |
字样(Typeface) | 要从默认字样使用的字体的名称。如果初始选择了无(None),将使用第一个条目(粗体(Bold))。 |
大小(Size) | 字体大小以磅值为单位测量。磅值到Slate单位的转换按96 dpi执行。所以,如果你使用Photoshop等工具制作布局和UI模型的原型,请务必将默认dpi测量从72 dpi更改为96 dpi。 |
字体材质(Font Material) | 渲染此字体时要使用的材质。 |
轮廓设置(Outline Settings) | 用于将轮廓应用于字体的设置。
|
颜色(Color) | 此文本的颜色和不透明度。 |
阴影偏移(Shadow Offset) | 它将设置阴影应该偏移多大程度。偏移0指示没有阴影。 |
阴影颜色和不透明度(Shadow Color and Opacity) | 阴影的颜色和不透明度。 |
阴影背景颜色(Shadow Background Color) | 所选文本的背景颜色。 |
高亮颜色(Highlight Color) | 高亮文本的颜色。 |
变换策略(Transform Policy) | 文本变换策略(默认为无(None))。 |
溢出策略(Overflow Policy) | 确定在文本被裁剪以及不适应文本控件的裁剪矩形时对文本执行的操作。 |
高亮形状 | |
图像(Image) | 要为此笔刷渲染的图像。分配的资产可以是UTexture、UMaterialInterface或实现AtlasedTextureInterface的对象。 |
图像大小(Image Size) | 资源的大小(按Slate单位)。 |
色调(Tint) | 应用于图像的色调。 |
绘制为(Draw As) | 如何绘制图像。
|
平铺(Tiling) | 如何在图像模式下平铺图像。
|
预览(Preview) | 设置图像应该如何显示在预览框中。 水平对齐(Horizontal Alignment):
垂直对齐(Vertical Alignment):
|
删除线笔刷 | |
图像(Image) | 要为此笔刷渲染的图像。分配的资产可以是UTexture、UMaterialInterface或实现AtlasedTextureInterface的对象。 |
图像大小(Image Size) | 资源的大小(按Slate单位)。 |
色调(Tint) | 应用于图像的色调。 |
绘制为(Draw As) | 如何绘制图像。
|
平铺(Tiling) | 如何在图像模式下平铺图像。
|
预览(Preview) | 设置图像应该如何显示在预览框中。 水平对齐(Horizontal Alignment):
垂直对齐(Vertical Alignment):
|
下划线笔刷 | |
图像(Image) | 要为此笔刷渲染的图像。分配的资产可以是UTexture、UMaterialInterface或实现AtlasedTextureInterface的对象。 |
图像大小(Image Size) | 资源的大小(按Slate单位)。 |
色调(Tint) | 应用于图像的色调。 |
绘制为(Draw As) | 如何绘制图像。
|
平铺(Tiling) | 如何在图像模式下平铺图像。
|
预览(Preview) | 设置图像应该如何显示在预览框中。 水平对齐(Horizontal Alignment):
垂直对齐(Vertical Alignment):
|