版权声明：本文为CSDN博主「趁着头发多我想做游戏」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_37658157/article/details/125386345

各位看官在接触UMG之前，推荐先查阅官方文档：

1. 控件类型参考 https://docs.unrealengine.com/4.27/zh-CN/InteractiveExperiences/UMG/UserGuide/WidgetTypeReference/
2. UMG UI设计器快速入门 https://docs.unrealengine.com/4.27/zh-CN/InteractiveExperiences/UMG/QuickStart/
3. UMG界面设计器用户指南 https://docs.unrealengine.com/4.27/zh-CN/InteractiveExperiences/UMG/UserGuide/

【UMG组件的简介与使用】的其他文章导航：
Panel 面板组件篇： https://blog.csdn.net/weixin_37658157/article/details/125603119

Border 边界

Border组件最多挂载一个子组件，自身可以设置图片和颜色属性，且可以为子组件设置内边距(Padding)。

Button 按钮

与Unity3D的Button不同，UMG的Button下最多挂载一个子物体（至今不懂为什么要这样设计？希望各位前辈不吝赐教），打破这个限制可以采取在Button下挂载一个CanvasPanel的办法，这个后面介绍CanvasPanel时会提到。
Button最重要的功能当然是点击、按下、抬起等等功能了，这些与Unity3D差不多，不再赘述。

CheckBox 勾选框

勾选框只有一个事件，就是OnCheckStateChanged事件，当勾选状态发生变化时会调用。
说实话，UE4对勾选框的支持十分鸡肋，既没有CheckBoxGroup，也没有复选框、单选框的切换选项，仅仅只是提供了选中/未选中/未确定等样式配置，在实际开发过程中，还不如用Button+Image的方式自己写一套勾选框的逻辑，这样还能更灵活地应对复杂的业务需求。

Image 图像

最基本最常见的组件之一，重点讲下以下几点：

1. Tint 染色 / Color And Opacity 颜色与透明度
   Image.Tint 和 Image.Color 都是给图像添加叠加色，暂时不明白为什么要设置两处可设置颜色的地方。
2. Draw As 绘制方式
   (1) None 不绘制
   此模式下不绘制图像。
   
   (2) Box 九宫格
   此模式下图像进行九宫格拉伸，切换到这个模式时，下方会出现Margin，Left/Right/Top/Bottom代表下方左图的四条线的偏移程度(0~1)，四个角不会被拉伸。
   
   (3) Border 边框
   此模式下的Margin相当于是指定上下左右四条边的粗细程度(0~1)，至于边缘是用平铺还是拉伸来填充暂时还不确定机理，实验中发现当粗细程度大于0.5时会进行拉伸甚至翻转，小于0.5时进行平铺，望知情人士不吝赐教。
   
   (4) Image 图像
   此模式下可以选择图像的平铺方式（Tiling），分别是横向平铺、纵向平铺和横纵平铺，比较简单，不再赘述。
   

Named Slot 命名槽

YouTube教程:https://www.youtube.com/watch?v=IxVfdthJYTs (科学上网)

实际上这个组件是为了解决自定义蓝图在复用时无法给它挂上子组件的问题，举个例子：现在有一个自定义蓝图叫做SlotHUD，当我们要给SlotHUD挂上一个Text时，会提示无法挂载：

现在我们稍作改动，在SlotHUD蓝图中添加Named Slot组件（位于左上角）：

此时就能愉快的添加自己想要的任何组件到NamedSlot节点下了：

注意，NamedSlot仅作为辅助节点而存在，本身不具有任何属性，点击Details面板时也只能看到NamedSlot的属性与其父节点一致（上图中SlotHUD的属性与NamedSlot属性一致），因此NamedSlot也不会与所处蓝图中的其他组件出现重名而被自动改名的情况，代码中不应该用名字直接获取NamedSlot，以防重名陷阱。

Progress Bar 进度条

(1) 设置填充值以及填充方向
设置Percent和BarFillType即可，有五种不同的填充方向可以选择。

(2) 走马灯效果（Marquee，译作移动字幕）
设置MarqueeImage的图片和勾选Is Marquee选项后生效，这算是比较有意思的功能，但是实际游戏开发中走马灯常用于文本的显示，这个功能就显得比较鸡肋了。

Text 文本

最基本最常见的组件之一，使用起来比较简单，可以设置文本字号、字样、字间距和颜色，也能设置描边（Outline Setting）和投影（Shadow Offset - 阴影偏移、 Shadow Color - 阴影颜色），值得一提的是还支持删除线（Strike Brush）和针对英文文本的全部转小写或者大写的操作（Transform Policy），一试便知，不再赘述。

Rich Text Block 富文本块

YouTube教程：https://www.youtube.com/watch?v=msy7bRDpKF4（科学上网）
官方教程：https://docs.unrealengine.com/5.0/zh-CN/umg-rich-text-blocks-in-unreal-engine/

不得不说，富文本块是个人觉得是UE4里少数能比U3D设计得要好的一个组件，不仅能自定义标签样式，还能支持图文混排（U3D需要写一点代码才能实现），下面说一下使用方法：
(1) 自定义标签样式
把RichTextBlock直接拖到编辑器中，在Content处填入文字后会发现乱码：

这是因为UE4的富文本采用了文本样式集（Text Style Set）的方法来管理富文本的样式数据，不指定好文本样式集，就会出现乱码。
首先我们来创建一个Data Table：

当然也可以在Content Browser里右键创建一个：

然后选择RichTextStyleRow类型的结构体：

双击新建好的Data Table，点击Add添加一条新的样式，重命名为 style1 (大小写不敏感) ，必须指定 Font Family。

若项目中没有 Font Family 可选，则可以打开 Show Engine Content 选项，使用引擎内置 Font Family。

创建完Data Table后，回去给RichTextBlock的Appearance下的Text Style Set设置Data Table，并且在Content内输入：

<style1>这是一段文字</>

PS：如果把样式名改为default，则在无标签的情况下会默认使用，比如下方两个内容是等价的：

<default>这是一段文字</>
这是一段文字

(2) 图文混排
注意到RichTextBlock的属性Appearance下有一个Decorator Classes项吗？这就是UE4的高明之处，它支持为一个已经存在的Data Table的添加N个装饰器，使之可以支持更多扩展功能。如果想实现图文混排，无非就是添加一个图片装饰器蓝图类到Decorator Classes中（详见RichTextBlockImageDecorator.cpp），添加装饰器的过程如下：
新建一个Data Table，类型为RichImageRow：

跟上述第(1)点类似，新建一条样式，只不过现在配置的样式不是文本，而是图片：

然后，新建一个继承RichTextBlockImageDecorator的蓝图类：

为该蓝图类指定刚才创建的Data Table：

最后回到RichTextBlock组件，添加刚才创建的装饰器蓝图类：

RichTextBlockImageDecorator支持的属性为(注意等于号前后不能有空格)：

<img id="样式名" strecth="拉伸值" width="宽度值" height="高度值"></>

实验中发现strecth属性似乎没效果，但源码中确实有解析strecth属性的逻辑，暂不明原因。

Slider 滑条

滑条最重要的回调就是OnValueChanged，属性面板上可以调节当前值、最值、滑动方向以及滑条和滑块的颜色，比较简单。
值得一提的是，滑条的长度可以通过调节整个组件的长度来实现，但是宽度必须通过调整Bar Thickness。而滑块的长宽是通过调节所属图片的Image Size来实现的，看图：

这个组件的设计个人感觉也不太科学，滑条和滑块应该分为两个组件来设计，否则一旦滑块需要特殊处理一些位置关系时比较麻烦了。