UE4学习笔记:学习UE4中的UMG(图形UI设计器)工具(三)：控件蓝图的常用控件及使用

学会了简单的使用蓝图控件之后，应该去掌握使用UMG中的常用控件

一.Common分组下的常用控件
（1）Border边框是一种容器控件，可以容纳一个子控件，这里添加一个按钮子控件，可以为子控件提供环绕的边框图像以及可调整的填充样式，在Appearance类目下可以为其设计控件样式，例如在Bursh->Image属性添加图片

(2)Button按钮作为一种可实现基本交互的控件，之前已经多次使用了

(3)CheckBox复选框用于显式几种勾选状态，在Appearance->CheckState可切换Unchecked，Checked以及Undetermined不确定状态，勾选Slot->Size to Content可让其大小正好

(4)Image图像控件用于在UI中显示平板刷，纹理或材质，我们可以在其下Appearance类目下Image中为其选择图片，并设置样式

(5)Named Slot命名槽用于为用户自己创建的控件显示，并可用各种其他控件来填充的外部槽

(6)Progress Bar进度条控件是一种条形图，用来显示进度，游戏中的经验值，体力值等。
我们可以在Style类目下设置进度条的图片样式，Percent进度数值以及Bar Fill Type填充形式，还可以在Appearance中设置颜色和透明度

(7)Slider滑块是一种可以显示滑动条的控件，其控制值在0-1之间变动，我们可以在Appearance类目中设置Value滑块数值，Orientation滑块方向，以及SliderColor颜色，StepSize步长

(8)Text作为屏幕上显示文本的基本方式已经之前多次使用了

(9)Text Box作为仅能输入单行文本的文本框控件，在Content类目下设置Text默认内容，Hint Text提示内容，Appearance类目下设置各样式，如Background Image，Font字体，Padding文本位置等。还可以在Appearance下设置是否是Is Read Only只读的以及Is Password是否为密码效果


(10)Text Box(Multi_Line)区别Text Box在于支持多行输入

二.Input分组下的常用控件
(1)ComboBox(String)用于通过下拉菜单向用户提供选项列表。在其Default Options中可以设置选项个数和内容


(2)Spin Box数字调整框是一种数值输入框，允许直接输入数字，或通过单机并滑动选择数字，在其Content下可设置Value数值以及允许输入的最小，最大值，此外还有Min Slider滑条最小值和最大值可以设置

(3)Optimization分组下的控件主要用于优化UI以获得更好的性能，如Invaliddation Box失效框将不会对其中的控件进行预处理绘图或上色，令子控件进行缓存，加快平板的渲染速度

三.Panel分组下的常用控件
(1)Gird Panel网格面板可以在所有子控件之间平均分割空间，在其Fill Rules类目下可以设置Column Fill和Row Fill，即行和列各自的槽数以及分布比例。我们可以对其中控件的上下左右移动按钮来移动控件进入不同的分割空间

在面板槽中的子控件可以通过HorizontalAlignment和VerticalAlignment来调整水平垂直位置

(2)HorizontalBox水平框用来将子控件排成一排，同样可以对子控件进行设置。我们可以在子控件的Slot->Size切换Fill与Auto，填充状态会让此子控件尽可能多的占据空间

(3)Overlay覆盖框允许控件相互重叠

(4)Scale Box缩放框用于以所需大小放置内容，其中的控件会随缩放框的大小变化而进行长宽的缩放，在其Stretching类目下的Stretch属性设置缩放框子控件的缩放形式如Stretch为Scale to Fit为默认值，而Fill选项则会让控件填满缩放框

(5)ScrollBox滚动框，为其加入控件超出框大小会出现滚动条，在Style中可以设置滚动框的样式

(6)Uniform Grid Panel均匀面板是种在所有子对象之间平均分割可用空间的面板，区别于Grid Panel，它不用设置行列槽数，我们可以在Child Layout类目种设置SlotPadding槽填充样式，如Left为50，即子控件距离左侧边界50像素距离

(7)Vertical Box对应Horizontal Box作为垂直框控件

(8)Widget Switcher控件切换器一次只显示一个控件，我们可以为其添加完全不同的子控件

(9)Wrap Box可以自动换行，从左到右整齐排列，超出宽度就会换行，子控件Slot下的Fill Span when Less设置表示如果自动换行框中的可用空间降至低于指定值，则槽将尝试填充整行，Content Layout->Inner Slot Padding可以设置子控件间隔

四.Primitive基元控件
(1)Circular Throbber循环展示图像的动态图示控件(旋转)，一般用于加载提示

(2)Editable Text/E第tableText(Multi_Line)可编辑文本是一种没有框背景的文本框

(3)Menu Anchor菜单锚控件用于指定位置，弹出菜单在此处调用并被锚定在这，一般搭配事件图表中的Menu Anchor->Event->Open使用

(4)Throbber类似于Circular Throbber用于加载

五.添加Widget Blueprint组件
看完了常用蓝图类型，再实践将控件蓝图作为蓝图的组件被添加到一般的蓝图中的方法

这里创建一个控件蓝图添加了一个带Text的按钮控件，并将视觉显示界面右上角FillScreen设置为Custom，将Width，Height都设置为100，自行设定默认Canvas Panel的尺寸

之后任意选择一张已被添加的蓝图，在组件面板中添加Widget组件，将其详情面板中的User Interaction->Widget Class设置为刚才创建的蓝图名，之后编译运行，可以看到控件作为组件出现在了场景中