UE4-（UI）第五十八课ToolTip-定制ToolTip、Select选择节点使用

示例：鼠标指向两个按钮分别显示不同的数据信息

一、创建需要显示在场景中的控件蓝图。

二、创建显示数据信息显示格式模板的控件蓝图命名为ToolTip；

编辑格式，放入一个水平盒，放入四个Text。

Text设置Padding左侧及右侧填充量为10；

Padding：表示文本距离插槽的各边距离。

Size：选择Auto，插槽会根据内容的长度来进行自动调节。填充：如果有四个text都选择填充，整个水平盒会被平分填满，

如果选择填充后边会出现一个参数，整个区域会跟随值的改变而改变，如果改为2，该控件占用区域会增加一倍，其他控件会平分剩下的区域。

均为1 填充效果：

有一个为2其余为1

可以设置内容的水平对齐方式及垂直对齐方式。

三、将控件更改为变量能够编辑。

1.选择名称及价格后面的两个空间，在右上侧将Is Varible 勾选，并且重命名为NameText，PriceText

在图标界面，就会出现对应的控件变量。

2.增加变量类型为整数型命名为id的变量，用于判断要提示什么信息。并且将该变量更改为可编辑实例，生成时显示。

可编辑实例：公开变量。

生成时显示：在使用节点创建此蓝图显示时在参数列表中将此变量显示。

3.编辑函数用于判断显示数据，增加函数名称为GetItemInfo，需要返回值为 Text 名称（后续要给NameText控件进行赋值）  及价格整数型，

编辑取值逻辑：

因为该函数中没有更改任何变量的值，所以可以进行对此函数设置为纯虚函数，不需要执行点连接

3.使用Event Construct 事件节点：该节点使用时当控件被创建时就会调用一次。调用取值函数，对NameText及PriceText赋值

保存格式控件蓝图

四、文件夹空白处右键创建新的控件蓝图，命名为ImageUMG，该蓝图作用，用于显示图片，并且指向该图片后显示提示信息的模板。

1.可删除也可以不删除Canvas panel，拖入Image控件，并填满区域。

2.选中Image，细节面板找到Behavior，在ToolTipWidget绑定新建函数。函数重命名为GetImageInfo

3.在ImageUMG控件蓝图中创建变量，并且设置可编辑实例

4.在该函数内创建控件，选择ToolTip，并将id变量与创建控件的id连接

5.因为需要设置Image图片格式，在图标界面编辑设置图片逻辑

注意：使用Select 选择节点

将Image设置为变量，然后使用Brush from Texture节点进行图片设置

使用Select 选择  节点

select接收3个参数，输出一个值。

select的输入和输出参数也可以是整数、float、Vector、Class、Object等等数据类型，当然也可以是自定义类型。

该节点用于判断输入值，如果是bool值类型只会判断true 和false。

设置Index 为 整数型，会对比两个值0,1，判断完成后会返回对应值。

return value 与 设置图片的参数中的Texture连接，参数会更改为对应值后面选择资源

编译保存

五、创建用于场景中显示的控件蓝图，命名为TestUMG。

1.选择用户创建，里面有ImageUMG。拖入到Canvas Panel 下

2.调整两个ImageUMG的大小，选中其中的一个ImgeUMG后，在细节面板找到默认选项下的id，设置id值分别为0和1

3.设置完成后，编译

4.在关卡蓝图中BeginPlay，创建控件节点，选择TestUMG，并显示到屏幕

五、运行结果

注意点：

1.控件中的ToolTip提示信息的绑定方法

2.变量的公开及显示到创建节点参数列表的设置方法。

3.Select选择节点的使用。

4.使用用户创建的控件放置到CanvasPanel中。