UE5 - 控件蓝图使用详解6（创建文字按钮、图片按钮）
作者：hangge | 2025-12-17 08:32
按钮最基础的作用是让人“按下去”，按下后按钮会在蓝图会触发蓝图事件，我们可以响应这个事件来处理按下的逻辑。下面我将通过样例演示按钮控件的使用。
（5）这里我保留默认 Tint 设置，并将 4 个状态都设置同一张纹理，就能实现默认状态下显示一个暗一点的苹果，当光标经过的时候按钮亮起，苹果变亮的效果。
1，创建文字按钮
（1）在控件库中搜索“Button”，就可以找到按钮控件。将它拖动到预览界面，或者拖动到组件树面板的“画布面板”控件上，就能创建一个按钮。选中按钮，拖动绿色边缘的控制点可以改变按钮的大小，拖动整个按钮就可以移动它的位置。
（2）在 UMG 中，按钮本身没有显示文本的功能，但是取而代之的，按钮可以添加任意一个子控件。这就意味着如果我们想让一个按钮控件显示文字， 那么可以给它添加一个文本控件作为子控件。在控件库中找到 Text 控件，然后拖动到控件树中的 Button 上。
（3）文本控件的默认颜色是白色，显示在灰色的按钮上可能会看不清楚，所以我们要改变控件的字体，并调整它的颜色，将它改成黑色的，就能得到一个好看的文本按钮了，
2，创建图片按钮
（1）首先，让我们再拖动一个按钮到“画布面板”上，然后调整按钮的大小和位置。在细节面板中展开“外观”→“样式”。其中，通过设置“样式”下的前四个选项就可以给按钮控件设置显示的图片。
（2）对于一个按钮来说，它总共有四种状态，分别是：
- Normal（普通状态）当光标没有放在按钮上，也没有按下按钮，按钮也不是禁用模式的时候，就是普通模式；
- Hovered（悬浮状态）当光标悬浮在按钮上的时候，按钮就是悬浮状态；
- Pressed（按下状态）当光标放在按钮上并且按下鼠标左键的时候，按钮就会进入按下状态；
- Disable（禁用状态）按钮可以被设置为禁用状态，在禁用状态下，按钮不可以被单击。
（3）Style 中的前四个选项就分别决定了上面这四种状态要显示的外观设置。比如我们想让按钮在普通状态的时候显示一个苹果图片，那么可以展开“普通”选项，单击“图像”设置中的下拉框，搜索并选择纹理“TexApple”，就可以看到预览面板中的按钮显示出了苹果的图片。
（4）我们会发现按钮显示出来的苹果图片比 TexApple 这张纹理实际上要暗，那可能是因为设置了“着色”（位于图像下方）。Tint 是叠加到图片上的颜色，如果 Tint 的颜色为白色，则按钮会显示出纹理本身的颜色，其他 Tint 的颜色设置都会改变 Tex 的颜色显示。如果我们将 Tint 颜色改为纯白色（RGBA 的值都为 1），就可以看到按钮变亮了。
为什么要有 Tint 颜色？
- 使用 Tint 来制作简单的按钮是非常方便的。当我们拖动动出一个按钮，你会发现在 Style 中的 Normal 和 Hovered 中默认都设置了一个 Tint 颤色，并且默认情况下 Normal 的 Tint 颜色会比 Hovered 更暗。这样，按钮就有一个认的效果：平时处于一个比较暗的状态，当光标悬浮在按钮上时，按钮就会自动亮起。
（5）这里我保留默认 Tint 设置，并将 4 个状态都设置同一张纹理，就能实现默认状态下显示一个暗一点的苹果，当光标经过的时候按钮亮起，苹果变亮的效果。
全部评论（0）