3、文本与按钮控件：TextBlock、Button、EditableTextBox的使用与属性设置
好，咱们今天聊聊UI里最基础、也最常用的三个控件：TextBlock、Button和EditableTextBox。说实话，这三个控件就像乐高里的基础砖块，几乎所有界面都离不开它们。我刚开始接触Unreal UI时，觉得这玩意儿太简单了，不就是显示文字、点个按钮、输个文本嘛。但真正做项目才发现，里面的坑还真不少。
3.1 TextBlock：不只是显示文字那么简单
TextBlock，说白了就是用来显示文本的。但你别小看它，我见过太多人直接把文字往上一扔，字体、颜色、对齐方式全用默认值。结果到了不同分辨率下，文字要么跑偏，要么糊成一团。
3.1.1 基本属性设置
选中一个TextBlock，右侧Details面板里能看到一堆属性。我挑几个重点说：
- Text：显示的内容。可以直接输入，也可以绑定变量。
- Font：字体族、大小、粗细。注意，字体族需要提前导入到项目里。
- Color and Opacity：文字颜色和透明度。嗯，这里有个小技巧——你可以用渐变色，但得通过Brush来实现。
- Justification：水平对齐方式。左对齐、居中、右对齐。
- Auto Wrap Text：自动换行。如果文字太长，记得勾上。
重点提醒：TextBlock的尺寸不会自动适应文字内容。你得手动设置Size Box或者用Wrap Text。否则文字超出边界，用户根本看不到。
3.1.2 动态更新文本
在实际项目中，文本内容往往是动态的。比如显示玩家血量、金币数量。这时候就需要用绑定或者代码更新。
我个人习惯用蓝图里的Set Text节点。举个例子：
// 在Event Tick里更新文本
Event Tick -> Set Text (Target: MyTextBlock, In Text: "当前血量: " + HealthValue)
但要注意，频繁更新文本会消耗性能。我曾经在一个HUD里每帧更新十几个TextBlock，结果帧率直接掉了20帧。后来改成每0.1秒更新一次，问题就解决了。
3.2 Button：让用户有地方下手
Button控件，用户点击后触发事件。听起来简单？但它的视觉反馈和交互逻辑，才是真正考验设计师的地方。
3.2.1 按钮的三种状态
每个Button都有三种视觉状态：Normal、Hovered、Pressed。你可以在Style里分别设置它们的背景、边框、文字颜色。
| 状态 | 触发条件 | 常见设计 |
|---|---|---|
| Normal | 默认状态 | 纯色背景，正常亮度 |
| Hovered | 鼠标悬停 | 亮度提高，或添加描边 |
| Pressed | 鼠标按下 | 颜色变暗，或缩小一点 |
我的经验：Hovered状态一定要做明显一点。用户悬停时如果没有任何反馈，他会怀疑按钮是不是坏了。我一般会在Hovered状态下加一个轻微的缩放动画，或者改变背景色。
3.2.2 按钮事件绑定
按钮最核心的事件就两个：OnClicked和OnHovered。在蓝图里，直接拖出Button节点就能看到。
// 点击按钮后执行
Button_Start -> OnClicked -> Open Level (MainMenu)
// 悬停时播放音效
Button_Start -> OnHovered -> Play Sound (HoverSFX)
这里有个坑：如果你在OnClicked里做了耗时操作（比如加载关卡），界面会卡住。我建议用Delay节点或者异步加载，给用户一个“正在加载”的反馈。
3.3 EditableTextBox：让用户输入内容
EditableTextBox，就是输入框。玩家可以在这里输入名字、聊天内容、搜索关键词等等。相比TextBlock，它多了交互性，但也多了不少麻烦。
3.3.1 常用属性
- Hint Text：输入框为空时显示的提示文字。比如“请输入用户名”。
- Is Read Only：只读模式。如果勾上，用户不能修改内容。
- Max Length：最大字符数。防止用户输入过长文本。
- Is Password：密码模式。输入的内容会显示为星号。
注意：EditableTextBox默认不会自动聚焦。也就是说，用户点击输入框后，键盘输入才会生效。如果你希望页面加载后自动聚焦到某个输入框，需要手动调用Set Focus节点。
3.3.2 获取用户输入
获取输入内容，通常用OnTextChanged或OnTextCommitted事件。
- OnTextChanged：每次用户输入一个字符都会触发。适合做实时搜索、字数统计。
- OnTextCommitted：用户输入完成（按回车或失去焦点）时触发。适合提交表单。
// 实时显示输入内容
EditableTextBox_Input -> OnTextChanged -> Set Text (Target: TextBlock_Display, In Text: NewText)
// 用户按回车后提交
EditableTextBox_Input -> OnTextCommitted -> (检查CommitMethod是否为OnEnter) -> SubmitForm()
我曾经做过一个聊天系统，一开始用的OnTextChanged来发送消息。结果用户每打一个字就发一条消息，服务器直接炸了。后来改成OnTextCommitted，只在按回车时发送，问题解决。
3.4 三个控件的配合使用
在实际界面中，这三个控件经常一起出现。比如一个登录界面：
- EditableTextBox：输入用户名和密码
- TextBlock：显示提示信息（如“登录失败”）
- Button：点击后执行登录逻辑
你想想看，如果用户点击登录按钮时，输入框是空的，你是不是应该用TextBlock显示一条错误提示？这就是它们之间的协作。
核心思路：TextBlock负责展示信息，Button负责触发动作，EditableTextBox负责收集输入。三者各司其职，但通过事件和变量紧密配合。
3.5 避坑指南
最后，分享几个我踩过的坑：
- 字体缺失：我曾经在项目里用了一个中文字体，结果打包后在某些设备上显示为方框。后来发现是字体文件没打包进去。记得在Project Settings里添加字体。
- 按钮点击区域：按钮的点击区域默认是它的尺寸。如果你给按钮加了圆角或者缩放动画，点击区域可能和视觉区域不匹配。可以用
Hit Test Visibility属性调整。 - 输入框焦点丢失：用户点击按钮时，输入框的焦点会丢失。如果你在
OnTextCommitted里做了逻辑，可能会意外触发。建议用OnTextChanged做实时校验，用OnTextCommitted做最终提交。
嗯，这三个控件虽然基础，但用好它们，你的UI交互体验就能上一个台阶。下一章我们会聊更高级的控件——ListView和TileView，到时候再深入讲讲数据绑定的玩法。