2.4 样式、主题与控件反射器调试

编辑器样式：别从头造

编辑器有自己的主题（深浅色、字号、间距），工具 UI 要「长得像编辑器」，直接用现成样式类：

样式类 用途
FCoreStyle::Get() 引擎核心样式（按钮、文本等基础控件默认样式）
FAppStyle::Get() 编辑器应用样式（UE5 推荐，跟随编辑器主题）
FEditorStyle::Get() 编辑器旧样式（UE4 遗留，很多代码还在用）
FTextBlockStyle / FButtonStyle 具体控件的样式实例 
SNew(STextBlock)
.TextStyle(FAppStyle::GetFontStyle("NormalText"))     // 跟随编辑器主题的字体

SNew(SButton)
.ButtonStyle(FAppStyle::Get(), "Button")              // 编辑器标准按钮

新建控件默认就是 FCoreStyle 的样式，多数情况下够用。自定义颜色/字体时定义自己的 Style：

// 插件内定义一个样式集
class FMyToolStyle : public FSlateStyleSet { ... };

图标资源

FSlateIcon(FMyToolStyle::GetStyleSetName(), "Icons.MyIcon")
// 或用编辑器自带图标
FSlateIcon(FAppStyle::Get().GetStyleSetName(), "Icons.Settings")

图标资源（PNG/SVG）放插件的 Resources 目录，通过 Style Set 注册。低分辨率图标在高 DPI 下会糊——准备 2x 尺寸或用 SVG。

排查 UI 问题的第一工具：控件反射器

「控件反射器」（https://www.wanxiangyundang.top/read/unreal-engine-5-8-docs/using-the-slate-widget-reflect-d7e2）是 Slate 版的「审查元素」：

  1. 窗口菜单 → 工具 → 控件反射器（或直接搜索 Widget Reflector）
  2. 点「Enable Widget Reflector」
  3. 鼠标悬停编辑器任意控件 → 反射器显示：控件类名、可见性、层级树、属性值

用途：

  • 看官方控件怎么搭的：想做个像「Details 面板里那种折叠组」的 UI？反射器照一下，它用的 SExpanderArrow+SDetailsView 相关结构
  • 查布局为什么不对：Hover 到挤扁的区域，直接看 Padding/Slot 的实际值
  • 性能分析：反射器可显示每个控件的重绘计数（Tick 频率）

调试 UI 代码的三个手段

  1. UE_LOG 打点：事件触发、属性绑定函数被调用的频率。绑定函数里 log 一下，立刻看到「这个文本每帧重绘 N 次」
  2. Slate Insights（https://www.wanxiangyundang.top/read/unreal-engine-5-8-docs/slate-insights-in-unreal-engin-e81c）：Trace 一段时间，看每个控件的 Paint/Tick 成本分布——找卡顿元凶
  3. 调试输出窗口位置：SNew(SBox) 临时把状态文本画到界面角落，比翻日志快（发布会前记得删）

常见视觉问题

现象 根因
按钮文字贴边 按钮没加 Padding，或样式 Padding=0
列表行太挤 ItemHeight 没设/设太小
字体太小看不清 用了非编辑器字体（如 CoreStyle 某些小字号样式）；换 FAppStyle
高 DPI 下图标糊 只有 1x 资源
主题切换后不协调 硬编码颜色（应改用 FAppStyle 的笔画色/背景色）

深浅主题适配

编辑器有亮/暗主题，硬编码颜色在两个主题下会很难看。用样式表里的语义色：

// 李：从 AppStyle 取语义色，自动跟主题
FLinearColor BorderColor = FAppStyle::Get().GetSlateColor("Colors.Recessed").GetSpecifiedColor();

心得：工具 UI 做「反射器走查」是个好习惯——做完一个面板，打开反射器把每个区域 Hover 一遍，立刻发现「这里多了两层无用 Box」「那里 Padding 不齐」。UE 编辑器 UI 是 Epic 主设计师调过的，照着它的间距/字号做不会丑。