comments
true

Slate是UE中提供的UI框架，它的核心理念如下：

Slate 架构|虚幻引擎5.2文档

关于UI的一些基础概念，可以了解：

现代图形引擎入门指南（七）— GUI

基础

在UE中，使用Slate，需要了解三个核心结构：

FSlateApplication ：全局单例，所有UI的调度中心。
SWindow ：顶层窗口，持有跨平台窗口的实例（FGenericWindow），提供窗口相关的配置和操作。
SWidget ：小部件，划分窗口区域，处理自身区域内的交互和绘制事件。

基本使用

在UE中，一个简单的Slate使用示例如下：

auto Window = SNew(SWindow)							//创建窗口
    .ClientSize(FVector2D(600, 600))				//设置窗口大小
    [												//填充窗口内容
        SNew(SHorizontalBox)						//创建水平盒子
        + SHorizontalBox::Slot()					//添加子控件插槽
        [											
            SNew(STextBlock)						//创建文本框
            .Text(FText::FromString("Hello"))		//设置文本框内容
        ]
        + SHorizontalBox::Slot()					//添加子控件插槽
        [
            SNew(STextBlock)						//创建文本框
            .Text_Lambda([](){ 						//设置文本框内容	
                return FText::FromString("Slate");
            })		
        ]
	];
FSlateApplication::Get().AddWindow(Window, true);	//注册该窗口，并立即显示

Slate的代码风格如下：

Slate 控件的类命名一般以 S开头
可以通过以下函数来快速构建Slate控件：
- SNew( WidgetType, ... )：通用的构造方式
- SAssignNew( ExposeAs, WidgetType, ... )：构造完成后，把控件赋值给ExposeAs
- SArgumentNew( InArgs, WidgetType, ... )：使用参数集进行构造
在构造的代码表达式中，可以通过一些函数来设置控件的构造参数，由于这些函数都会返回控件自身的引用，因此可以进行链式调用
- 可以通过operatpr . 调用函数来设置控件的属性和事件
- 对于 SPanel 的子类，可以使用operator +SPanelType::Slot添加子控件的插槽
- 对于 SCompoundWidget 和 SPanel::Slot ，可以使用operator []来填充子控件
- 对于Slate的属性和事件，可以通过多种方式绑定，比如上面的.Text(...)设置的是静态值，还可以通过绑定函数来动态获取属性值：
  - Text_Lambda(...)
  - Text_Raw(...)
  - Text_Static(...)
  - Text_UObject(...)

控件开发中，我们可以依靠一些经验（合理即存在），以及IDE的辅助来完成代码的编写。

Slate可以同时作为 Game UI 和 Editor UI

在Editor中，可以通过如下方式来添加UI：

auto Window = SNew(SWindow)							//必须具有一个顶层窗口
    .Title(FText::FromString("CustomWindow"))		//设置窗口标题
	.ClientSize(FVector2D(600, 600))				//设置窗口大小
	[												//填充窗口内容
		SNew(SSpacer)								//自身控件，这里是一个空白填充				
	];

//方法1：注册该窗口，并立即显示
FSlateApplication::Get().AddWindow(Window, true);	

//方法2：注册该窗口，不显示，手动调用ShowWindow来显示
FSlateApplication::Get().AddWindow(Window, false);	//注册该窗口，并立即显示
Window->ShowWindow();

也可以通过DockTab的方式来添加窗口：

// 注册Tab页面的生成器
FGlobalTabmanager::Get()->RegisterTabSpawner(FName("CustomTab"),FOnSpawnTab::CreateLambda([](const FSpawnTabArgs& Args){
    return SNew(SDockTab)
        [
        	SNew(SSpacer)
    	];
}));
FGlobalTabmanager::Get()->TryInvokeTab(FTabId("CustomTab"));		//尝试激活Tab页面

在Game中，可以通过以下方式来添加UI：

GEngine->GameViewport->AddViewportWidgetContent(
		SNew(SSpacer)
);

GameViewport还有其他接口可用：

class UGameViewportClient : public UScriptViewportClient, public FExec
{
	virtual void AddViewportWidgetContent( TSharedRef<class SWidget> ViewportContent, const int32 ZOrder = 0 );
	virtual void RemoveViewportWidgetContent( TSharedRef<class SWidget> ViewportContent );
	virtual void AddViewportWidgetForPlayer(ULocalPlayer* Player, TSharedRef<SWidget> ViewportContent, const int32 ZOrder);
	virtual void RemoveViewportWidgetForPlayer(ULocalPlayer* Player, TSharedRef<SWidget> ViewportContent);
	void RemoveAllViewportWidgets();
	void RebuildCursors();
};

详见：https://docs.unrealengine.com/5.2/en-US/using-slate-in-game-in-unreal-engine/

基本概念

对于UI开发，需要了解以下的基础概念：

窗口的基本状态 ：激活（Active），焦点（Focus），可见（Visible），模态（Modal），变换（Transform）
布局策略及相关概念 ：
- 盒式布局（HBox，VBox），流式布局（Flow），网格布局（Grid），锚式布局（Anchors），重叠布局（Overlap），画布（Canvas）
- 内边距（Padding），外边距（Margin），间距（Spacing），对齐方式（Alignment）
样式管理 ：图标（Icon），风格（Style），画刷（Brush）
字体管理 ：字体类型（Font Family），文本宽度测量(Font Measure)
尺寸计算 ：控件尺寸计算策略
交互事件 ：鼠标，键盘，拖拽，焦点事件，事件处理机制，鼠标捕获
绘制事件 ：绘制元素，区域裁剪
基本控件 ：标签（Label），按钮（Button），复选框（Check），组合框（Combo），滑动条（Slider），滚动条（Scroll Bar），文本框（Text），对话框（Dialog），颜色选取（Color），菜单栏（Menu Bar），菜单（Menu），状态栏（Status Bar），滚动面板（Scroll ），堆栈（切换）面板（Stack/Switcher），列表面板（List），树形面板（Tree）...
国际化 ：文本本地化翻译（Localization）

并了解 UI 框架中有哪些全局数据和操作，在UE中，可以使用输入Get，Set，根据IDE提示简单过一遍：

这也体现了遵循一定编码规范所带来的好处

SWidget

SWidget 是 Slate UI开发过程中，开发者接触频率最多的类型，它是所有UI控件的基类

对于开发者而言，需要了解它的基本骨架，知道哪些属性可以调整：

TAttribute<bool> EnabledState,  						//开启状态，指定是否能够与控件交互，如果禁用，则显示为灰色
TAttribute<EVisibility> Visibility,						//可见性策略
TSharedPtr<IToolTip> ToolTip,							//提示框控件
TAttribute<FText> ToolTipText,							//提示框文本内容
TAttribute<TOptional<EMouseCursor::Type> > Cursor,		//鼠标样式
float RenderOpacity,									//渲染透明度
TAttribute<TOptional<FSlateRenderTransform>> Transform,	//渲染变换
TAttribute<FVector2D> TransformPivot,					//渲染变换中心
FName Tag,												//标签
bool ForceVolatile,										//强制UI失效
EWidgetClipping Clipping,								//裁剪策略
EFlowDirectionPreference FlowPreference,				//UI流向
TOptional<FAccessibleWidgetData> AccessibleData,		//存储数据
TArray<TSharedRef<ISlateMetaData>> MetaData				//元数据

详见：https://docs.unrealengine.com/5.2/zh-CN/slate-ui-widget-examples-for-unreal-engine/

哪些函数可以调用：

哪些函数可以进行覆写（Override）：

SWindow

SWindow 继承自 SCompoundWidget ，这样做只是为了让 SWindow 能够使用像 SWidget 一样的代码风格，它具有以下属性：

EWindowType Type;								//窗口类型
FWindowStyle Style;     						//窗口样式
FText Title;									//窗口标题
float InitialOpacity;							//初始透明度

FVector2D ScreenPosition 						//窗口坐标
FVector2D ClientSize;							//窗口客户区域尺寸
TOptional<float> MinWidth;						//最小宽度
TOptional<float> MinHeight;						//最小高度
TOptional<float> MaxWidth;						//最大宽度
TOptional<float> MaxHeight;						//最大高度
FMargin LayoutBorder;							//窗口内容的边距
FMargin UserResizeBorder;						//调整窗口区域时的响应距离

EAutoCenter AutoCenter; 						//居中策略
ESizingRule SizingRule;							//窗口尺寸处理策略
FWindowTransparency SupportsTransparency; 		//窗口透明度策略
EWindowActivationPolicy ActivationPolicy;		//激活处理策略

bool IsInitiallyMaximized;						//初始时显示为最大化
bool IsInitiallyMinimized;						//初始时显示为最小化
bool IsPopupWindow;								//是否是 Pop up 窗口（无任务栏图标）
bool IsTopmostWindow;							//是否是置顶窗口
bool FocusWhenFirstShown;						//首次预览时获得焦点
bool AdjustInitialSizeAndPositionForDPIScale;	//根据DPI调整窗口初始坐标和尺寸
bool UseOSWindowBorder;							//使用操作系统自身的窗口边框
bool HasCloseButton;							//是否带有关闭按钮
bool SupportsMaximize;							//是否支持最大化
bool SupportsMinimize;							//是否支持最小化
bool ShouldPreserveAspectRatio;					//是否锁定宽高比
bool CreateTitleBar;							//是否创建标题栏
bool SaneWindowPlacement;						//是否将窗口约束到屏幕内
bool bDragAnywhere;								//是否可拖拽到任意位置
bool bManualManageDPI;							//是否手动调整DPI

常用的函数有：

void MoveWindowTo( FVector2D NewPosition );
void ReshapeWindow( FVector2D NewPosition, FVector2D NewSize );
void ReshapeWindow( const FSlateRect& InNewShape );
void Resize( FVector2D NewClientSize );
void MorphToPosition( const FCurveSequence& Sequence, const float TargetOpacity, const FVector2D& TargetPosition );
void MorphToShape( const FCurveSequence& Sequence, const float TargetOpacity, const FSlateRect& TargetShape );

void ShowWindow();
void HideWindow();
void BringToFront( bool bForce = false );
void RequestDestroyWindow();
void EnableWindow( bool bEnable );
void Maximize();
void Restore();
void Minimize();

开发流程

Slate开发的绝大部分工作内容可以归纳为：

设置控件属性
绑定事件逻辑
组织层次结构

SWidget 是一个抽象基类，UE根据不同的使用方式，又对其进行派生，划分为四大类：

SCompoundWidget ：可以设置ChildSlot

Slate 用来提供给开发者的主要扩展方式，一般继承它是为了利用已有的SWidget来组织一系列的Widget。
SPanel ：可以看做是SWidget的容器，可以包含一个或多个ChildSlot，用于添加SWidget。

Slate已经派生了足够多的SPanel，用于组织Slate的布局等各类操作，一般情况下很少对其派生。
SLeafWidget ：叶子控件，不包含ChildSlot

派生它，主要是为了自定义一些拥有独特渲染和尺寸处理机制的控件
SWeakWidget ：定义逻辑上的归属而非事件上的。

SPanel中的SWidget在事件上具有层级关系，但有时会出现一些特殊情况，比如点击按钮打开一个菜单，菜单可以看做是隶属于这个按钮的，但本质上菜单是新开启了一个窗口，它们在事件传递上并不存在层级关系，所以就得靠SWeakWidget来解决这个问题。一般情况下很少使用它。

大多时候，我们会新增一个C++类，继承自 SCompoundWidget ，在Construct函数中填充子控件，就像是这样：

class SCustomWidget: public SCompoundWidget
{
public:
	SLATE_BEGIN_ARGS(SCustomWidget) {}				//定义Slate参数
	SLATE_END_ARGS()
public:
	void Construct(const FArguments& InArgs){		//使用SNew本质上是调用该函数
        ChildSlot									//填充子控件
        [
            SNew(STextBlock)
            .Text(FText::FromString("This is body"))
        ];
    }
};

这样我们就可以使用如下代码来创建该控件：

auto MyWidget = SNew(SCustomWidget);

如果想增加 参数（Argument） ，比如说让文本内容可以设置，那么可以把定义改为：

class SCustomWidget : public SCompoundWidget
{
public:
	SLATE_BEGIN_ARGS(SCustomWidget)							
		: _Text(FText::FromString("Default")) {		//初始化参数默认值，变量名为参数定义时的变量名前加下划线
		}				
		SLATE_ARGUMENT(FText,Text)					//使用宏SLATE_ARGUMENT定义参数
	SLATE_END_ARGS()
public:
	void Construct(const FArguments& InArgs) {		
		Text = InArgs._Text;						//接收传递进来的参数
		ChildSlot									
        [
            SNew(STextBlock)
            .Text(Text)								//传递文本内容
        ];
	}
private:
	FText Text;
};

这样就可以使用如下代码设置控件内容：

auto MyWidget = SNew(SCustomWidget)
    				.Text(FText::FromString("Hello"));

当然，我们也可以不走FArguments的方式，直接这样：

class SCustomWidget : public SCompoundWidget
{
public:
	SLATE_BEGIN_ARGS(SCustomWidget){}				
	SLATE_END_ARGS()
public:
	void Construct(const FArguments& InArgs, FText InText) {	//直接从Construct的函数参数中传入
		Text = InText;						
		ChildSlot									
		[
            SNew(STextBlock)
            .Text(Text)
		];
	}
private:
	FText Text;
};

auto MyWidget = SNew(SCustomWidget,FText::FromString("Hello"));	  //从SNew的参数列表中传入Text

如果想让上述参数能够绑定委托，就需要使用Slate的 属性（Attribute） 机制：

class SCustomWidget : public SCompoundWidget
{
public:
	SLATE_BEGIN_ARGS(SCustomWidget)							
		: _Text(FText::FromString("Default")) {		
		}				
		SLATE_ATTRIBUTE(FText,Text)							//使用宏SLATE_ATTRIBUTE定义参数
	SLATE_END_ARGS()
public:
	void Construct(const FArguments& InArgs) {		
		Text = InArgs._Text;								//接收传递进来的参数
		ChildSlot									
			[
				SNew(STextBlock)
				.Text(Text)									//传递文本属性
			];
	}
private:
	TAttribute<FText> Text;									//使用TAttribute包裹属性
};

然后就能使用这样的代码：

auto MyWidget = SNew(SCustomWidget)
		.Text_Lambda([](){
			return FText::FromString("Hello");
		});

如果想增加一些控件的事件处理回调，比如说当上面文本变动时的做一些处理，那么可以用 Slate 的 事件（Event） 机制：

class SCustomWidget : public SCompoundWidget
{
public:
	SLATE_BEGIN_ARGS(SCustomWidget)							
		: _Text(FText::FromString("Default")) {		
		}				
		SLATE_ATTRIBUTE(FText,Text)							
		SLATE_EVENT(FSimpleDelegate, OnTextChanged)	//使用宏SLATE_EVENT声明事件
	SLATE_END_ARGS()
public:
	void Construct(const FArguments& InArgs) {		
		Text = InArgs._Text;	
		OnTextChanged = InArgs._OnTextChanged;		//传递事件委托
		ChildSlot									
		[
			SNew(STextBlock)
			.Text(Text)
		];
	}
	void SetText(FText InText) {
		Text = InText;
		OnTextChanged.ExecuteIfBound();				//执行委托
	}
	FText GetText(){
		return Text.Get();
	}
private:
	FSimpleDelegate OnTextChanged;					//定义委托
	TAttribute<FText> Text;
};

auto MyWidget = SNew(SCustomWidget)
    .Text_Lambda([](){
        return FText::FromString("Hello");
    })
    .OnTextChanged_Lambda([](){						//当文字变动时打印日志
        UE_LOG(LogTemp,Warning,TEXT("Oh, Text is changed!"));
    });

此外，SLATE_BEGIN_ARGS(...)和SLATE_END_ARGS()之间还有其他可供使用的宏，使用频率不高，因此这里不展开描述，具体可以查看：

Engine\Source\Runtime\SlateCore\Public\Widgets\DeclarativeSyntaxSupport.h

综上，Slate的开发流程基本如此。

控件一览

这里主要是为了建立 控件<--->类型 的映射，知道有什么控件，当使用这些控件的时候，UE源码中大量的用例可供参考，此外UE还提供相应的调试工具。

基础

SButton：按钮

SCheckBox：复选框

SComboBox<OptionType>：自定义元素的组合框，需要提供菜单项的控件生成器

STextComboBox ：文本组合框

SComboButton：组合按钮，与ComboBox不同的是，ComboButton需要提供一个完整菜单的生成器，而非菜单项生成器

SInputKeySelector：按键输入选择器

SNumericDropDown<NumType>：数字下拉控件

SNumericEntryBox<NumType>：数字选择框

SRotatorInputBox = SNumericRotatorInputBox<float>：旋转输入框

SSlider：滑动条

SSpinBox<NumericType>：自定义数字类型的微调框

SVectorInputBox = SNumericVectorInputBox<float, UE::Math::TVector<float>, 3>：向量输入框

SVolumeControl：音量调节控件

文本

STextBlock：文本显示块

SRichTextBlock：富文本显示块
SEditableText：可编辑文本

SInlineEditableTextBlock：单行文本编辑块（在编辑时才会显示边框）

SEditableTextBox：可编辑器文本框

SSuggestionTextBox：带智能提示及输入历史的文本框

SSearchBox：搜索框

SMultiLineEditableText：多行文本编辑块

SMultiLineEditableTextBox：多行可编辑文本框

SHyperlink：超链接

颜色

SColorBlock：单个颜色的显示控件

SSimpleGradient：简单渐变色的显示控件，只支持设置起始颜色和结束颜色

SComplexGradient：复杂渐变色的显示控件，支持任意颜色数量组成的渐变色

SColorPicker：单个颜色调节的整合控件（需引入模块 AppFramework ）

图像

SImage：用于显示图像

通知

SErrorHint：错误图标，可设置ToolTip

SErrorText：红色背景的文本块

FNotificationInfo：非控件，用于消息通知

FNotificationInfo NotificationInfo(FText::FromString("FNotificationInfo"));
NotificationInfo.Text = FText::FromString("This Is Notification Info");
NotificationInfo.bFireAndForget = true;
NotificationInfo.ExpireDuration = 100.0f; 
NotificationInfo.bUseThrobber = true;
FSlateNotificationManager::Get().AddNotification(NotificationInfo);

SProgressBar：进度条

SHeader：标题控件

SScrollBar：滚动条

SSpacer：空白控件，一般用于在布局中进行填充

控件容器（SPanel）

布局与尺寸

SVerticalBox：竖直布局
SHorizontalBox：水平布局
SOverlay：重叠布局
SGridPanel：网格布局

SUniformGridPanel：使用统一网格大小的网格布局面板。
SWrapBox：流式布局，可设置排列方向，当控件超出尺寸时，换行。

SUniformWrapPanel：使用统一大小的流式布局
SCanvas：可以使用任意坐标和大小来放置Child
SConstraintCanvas :静态
SSplitter：可以拖拽分割线来调整Widget间分割的大小

SScrollBox：为Content添加滚动条

SWidgetSwitcher：Widget切换控件，将Widget全部添加到Slot中，通过设置Slot Index来切换显示对应的Widget

SDPIScaler：用于调整DPI缩放
SBox：控制Content的固定尺寸、最小尺寸或者最大尺寸

SScaleBox：统一缩放Content的尺寸

视图

SListView：列表视图

STileView：块视图

STreeView：树视图

停靠窗口

SDockTab

const TSharedRef<SDockTab> MajorTab = SNew(SDockTab).TabRole(ETabRole::MajorTab);
TabManager = FGlobalTabmanager::Get()->NewTabManager(MajorTab);

TabManager->RegisterTabSpawner(FName("MyDockTab"), FOnSpawnTab::CreateLambda([](const FSpawnTabArgs& Args) {
    TSharedRef<SDockTab> Tab = SNew(SDockTab).Content()[SNew(STextBlock).Text(FText::FromString("MyDockContent"))];
    return Tab;
})).SetDisplayName(FText::FromString("MyDock"))
    .SetMenuType(ETabSpawnerMenuType::Hidden);
TabManager->TryInvokeTab(FName("MyDockTab"));

其他

SBackgroundBlur：模糊Content的背景

SBorder：为Content添加边框

STooltipPresenter：为Content添加ToolTip
SExpandableArea：允许展开或收纳Content

SFxWidget
SMenuAnchor：为区域增加上下文菜单

代码参考

UE提供了 控件反射器 ，可以快速定位到对应UI的创建代码，它的启动点位于编辑器主面板的顶部菜单栏 - 工具 - 调试 - 控件反射器：

另外，官方的引擎源码中也提供了一个 SlateViewer 工程展示了大部分Slate控件的基本使用：

借助IDE的 代码搜索工具 可以在引擎中找到对应控件的参数示例，在Visual Studio中也可以在解决方案资源管理器中查看类的派生关系概览所有控件：

高级定制

上述技能能满足UI开发的绝大部分需求，但需要涉及到一些复杂的交互机制和渲染逻辑时，就需要自定义SLeafWidget

这里有一个很好的示例，实现了一个可拖拽移动的控件：

代码如下：

#pragma once
#include "Styling/StyleColors.h"
#include "Brushes/SlateColorBrush.h"

class SCustomSlateWidget :public SLeafWidget {
	SLATE_DECLARE_WIDGET(SCustomSlateWidget, SLeafWidget)	//使用宏SLATE_DECLARE_WIDGET声明Slate控件
public:
	SLATE_BEGIN_ARGS(SCustomSlateWidget) {}
	SLATE_END_ARGS()
	void Construct(const SCustomSlateWidget::FArguments InArgs) {
		SetCursor(EMouseCursor::GrabHand);					//设置鼠标进入控件区域的样式
	}
protected:
	FReply OnMouseButtonDown(const FGeometry& MyGeometry, const FPointerEvent& MouseEvent) override {
		if (MouseEvent.IsMouseButtonDown(EKeys::LeftMouseButton)) {
			LastMouseDownPosition = MyGeometry.AbsoluteToLocal(MouseEvent.GetScreenSpacePosition());//将鼠标位置从屏幕空间转换到控件的本地空间
			return FReply::Handled().CaptureMouse(SharedThis(this));								//开始高频率捕获全局的鼠标移动
		}
		return FReply::Handled();
	}
	FReply OnMouseMove(const FGeometry& MyGeometry, const FPointerEvent& MouseEvent) override{
		if (MouseEvent.IsMouseButtonDown(EKeys::LeftMouseButton)) {
			auto Window = FSlateApplication::Get().FindWidgetWindow(SharedThis(this));					//获取该控件的窗口
			auto CurrentMousePosition = MyGeometry.AbsoluteToLocal(MouseEvent.GetScreenSpacePosition());
			auto CurrWindowPosition = Window->GetPositionInScreen();
			auto TargetPosition = CurrentMousePosition + CurrWindowPosition - LastMouseDownPosition;	//计算位置移动
			Window->MoveWindowTo(TargetPosition);
		}
		return FReply::Handled();
	}
	FReply OnMouseButtonUp(const FGeometry& MyGeometry, const FPointerEvent& MouseEvent) override {
		LastMouseDownPosition = FVector2D::ZeroVector;
		return FReply::Handled().ReleaseMouseCapture();											//	释放鼠标捕获
	}
	int32 OnPaint(const FPaintArgs& Args, const FGeometry& AllottedGeometry, const FSlateRect& MyCullingRect, FSlateWindowElementList& OutDrawElements, int32 LayerId, const FWidgetStyle& InWidgetStyle, bool bParentEnabled) const override {
		static FSlateFontInfo FontInfo = FCoreStyle::GetDefaultFontStyle("Bold",30);
		static const FSlateBrush* Bursh = FAppStyle::GetBrush("WhiteBrush");
		FLinearColor BackgroundColor = IsHovered()? FLinearColor(0.6f, 0.5f, 0.9f) : FLinearColor(0.1f, 0.5f, 0.9f);
		FSlateDrawElement::MakeBox(OutDrawElements, LayerId, AllottedGeometry.ToPaintGeometry(), Bursh, ESlateDrawEffect::None, BackgroundColor);		//绘制背景
		FSlateDrawElement::MakeText(OutDrawElements, LayerId, AllottedGeometry.ToPaintGeometry(), FText::FromString("Hello Slate"), FontInfo);			//绘制文字
		return LayerId;
	}
	FVector2D ComputeDesiredSize(float LayoutScaleMultiplier) const override {
		return FVector2D::ZeroVector;															// 使用零向量会填充父控件的内容
	}
private:
	FVector2D LastMouseDownPosition = FVector2D::ZeroVector;
};

// 下方代码需要放置在cpp中
SLATE_IMPLEMENT_WIDGET(SCustomSlateWidget)							// 使用宏SLATE_IMPLEMENT_WIDGET生成代码实现
void SCustomSlateWidget::PrivateRegisterAttributes(FSlateAttributeInitializer& AttributeInitializer) 	//必须实现此函数
{
}

FSlateApplication::Get().AddWindow(
    SNew(SWindow)
    .ClientSize(FVector2D(200,200))					//设置窗口尺寸为200*200
    .SizingRule(ESizingRule::FixedSize)				//固定窗口尺寸
    .SupportsMaximize(false)						//关闭最大化
    .SupportsMinimize(false)						//关闭最小化
    .CreateTitleBar(false)							//不创建标题栏
    .AutoCenter(EAutoCenter::PreferredWorkArea)		//居中显示
    .IsTopmostWindow(true)							//置顶
    [
        SNew(SCustomSlateWidget)
    ]
);

自定义 SLeafWidget 的工作流程是：

使用宏 SLATE_DECLARE_WIDGET(WidgetType, ParentType) 声明控件
使用宏 SLATE_IMPLEMENT_WIDGET(WidgetType) 在cpp中定义代码实现，并实现函数：
- void WidgetType::PrivateRegisterAttributes(FSlateAttributeInitializer& AttributeInitializer)
覆写控件尺寸计算的函数：
- virtual FVector2D SWidget::ComputeDesiredSize(float LayoutScaleMultiplier) const = 0
覆写各类交互事件。
调整控件的属性状态机
依据属性状态机，在绘制函数（OnPaint）中添加绘制元素

交互事件

SWidget提供了非常多的交互事件（以On开头的虚函数）供开发者覆写：

OnFocusReceived：获得焦点
OnFocusLost：失去焦点
OnFocusChanging：焦点发生变化
OnKeyChar：当键盘输入时
OnKeyDown：键盘按键按下
OnKeyUp：键盘按键抬起
OnMouseButtonDown：鼠标按键按下
OnMouseButtonUp：鼠标按键抬起
OnMouseMove：鼠标移动
OnMouseEnter：鼠标进入到Widget区域的瞬间
OnMouseLeave：鼠标离开到Widget区域的瞬间
OnMouseButtonDoubleClick：鼠标双击
OnMouseWheel：鼠标滚轮滚动
OnDragEnter：拖拽东西进入Widget区域的瞬间
OnDragLeave：拖拽东西离开Widget区域的瞬间
OnDragOver：拖拽东西覆盖Widget区域的时候
OnDrop：在Widget上释放拖拽的东西
...

详细说明，请看SWidget的定义，上面有各个事件的说明及触发时机，关于用法可在UE源码中搜索相应的用例。

使用说明：

这些事件由 FSlateApplication 负责调用，其函数参数一般包含了该事件携带的所有信息，我们只需对其进行覆盖（override），根据事件数据，做自己的逻辑即可。
事件的返回类型为 FReply ，用于定义事件的后续处理，它的构造函数是私有的，必须使用如下静态函数去创建实例：
- FReplay::Handled()：说明该事件已被处理，事件将不会继续往下一级传递。
- FReplay::Unhandled()：说明该控件并不处理该事件，事件会继续往下一级传递。
FReply 提供了一系列操作用于在事件结束时做一些处理：

绘制事件

SWidget的实际绘制函数为Paint，但由于绘制过程中存在一些固定步骤，因此Slate公开了绘制事件OnPaint供我们自定义绘制逻辑，它的定义如下：

virtual int32 OnPaint(const FPaintArgs& Args, 
                      const FGeometry& AllottedGeometry,
                      const FSlateRect& MyCullingRect, 
                      FSlateWindowElementList& OutDrawElements, 
                      int32 LayerId,
                      const FWidgetStyle& InWidgetStyle,
                      bool bParentEnabled) const = 0;

参数说明：

const FPaintArgs& Args：绘制事件的参数，可以得到绘制的当前时间、间隔、父窗口...
const FGeometry& AllottedGeometry：分配给该SWidget的几何大小（相对于父窗口）
const FSlateRect& MyCullingRect：该SWidget的裁剪举行，可以在绘制中根据该矩形丢弃绘制元素
FSlateWindowElementList& OutDrawElements：这是整个SWindow的绘制元素列表，我们绘制则是对该对象进行修改。
int32 LayerId：绘制的LayerID，一般用于给UI分层，方便对同层级的绘制元素做统一处理。
const FWidgetStyle& InWidgetStyle：父窗口传递过来的Style
bool bParentEnabled：父窗口是否处于开启状态。

在OnPaint函数中，我们主要通过 FSlateDrawElement 中很多命名以Make开头的静态函数来创建绘制元素，其中有：

static void MakeBox( //绘制盒子，通过设置Brush，可以是颜色块，也可以是图片
	FSlateWindowElementList& ElementList,
	uint32 InLayer,
	const FPaintGeometry& PaintGeometry,
	const FSlateBrush* InBrush,
	ESlateDrawEffect InDrawEffects = ESlateDrawEffect::None,
	const FLinearColor& InTint = FLinearColor::White );

static void MakeRotatedBox(...);		//绘制一个具有旋转的盒子
static void MakeGradient(...);			//绘制渐变的盒子
static void MakeText(...);				//绘制文本
static void MakeShapedText(...);		//绘制形状文本
static void MakeLines(...);				//绘制线条
static void MakeSpline(...)				//绘制曲线
static void MakeDrawSpaceSpline(...);	 //在绘制空间绘制曲线
static void MakeCubicBezierSpline(...);  //绘制三阶贝塞尔曲线
static void MakeViewport(...)			//绘制FSlateViewport
static void MakeCustom(...);	 		//绘制自定义元素，可自行实现元素的Render函数
static void MakeCustomVerts(...);		//根据顶点进行绘制
static void MakePostProcessPass(...);	//绘制后期滤镜（模糊）

这些函数在UE中有非常多的使用，可以搜索相关代码来参考。

详见：Runtime\SlateCore\Public\Rendering\DrawElements.h

FSlateBrush

FSlateBrush 用于控制填充区域，在界面中有较高的使用频率，因此Slate也提供了一些它的便捷扩展：

FSlateBorderBrush ：填充边框
FSlateBoxBrush ：盒子画刷
FSlateRoundedBoxBrush ：圆角矩形画刷
FSlateColorBrush ：颜色画刷
FSlateImageBrush ：图片
- FSlateVectorImageBrush ：矢量图
FSlateDynamicImageBrush ：可动态切换图片的画刷
FSlateNoResource ：不带任何资源的画刷

上面的一些画刷本质上都是通过一些特定的参数去构造 FSlateBrush ，如果出现上述画刷需要组合的情况，可根据它们的构造参数自行组合。

UE中提供了一些内置的 FSlateBrush ，可以在源码中搜索::Get().GetBrush来查找相关使用：

示例

假如想让整个SWidget填充红色，可以使用这样的代码：

int32 SCustomSlateWidget::OnPaint(const FPaintArgs& Args,
                                  const FGeometry& AllottedGeometry,
                                  const FSlateRect& MyCullingRect,
                                  FSlateWindowElementList& OutDrawElements,
                                  int32 LayerId,
                                  const FWidgetStyle& InWidgetStyle,
                                  bool bParentEnabled) const {
    static FSlateColorBrush ColorBrush(FColor(255,0,0));
	FSlateDrawElement::MakeBox(OutDrawElements,
                               LayerId, 
                               AllottedGeometry.ToPaintGeometry(),
                               &ColorBrush,
                               ESlateDrawEffect::None, 
                               ColorBrush.TintColor.GetColor(InWidgetStyle));
	return LayerId;
}

ESlateDrawEffect

ESlateDrawEffect 为Slate提供了一些效果，它可以是以下值：

enum class ESlateDrawEffect : uint8
{
	None					= 0,			//无效果
	NoBlending			= 1 << 0,			//无混合
	PreMultipliedAlpha	= 1 << 1,			//预乘Alpha
	NoGamma				= 1 << 2,			//不进行Gamma矫正
	InvertAlpha			= 1 << 3,			//反转透明度
	// ^^ These Match ESlateBatchDrawFlag ^^

	NoPixelSnapping		= 1 << 4,			//关闭像素对齐
	DisabledEffect		= 1 << 5,			//禁用状态的效果
	IgnoreTextureAlpha	= 1 << 6,			//忽略纹理中的透明度

	ReverseGamma			= 1 << 7		//逆转Gamma
};

FSlateFontInfo

FSlateFontInfo 用于指定字体信息，对应UE里的字体资产，它的部分定义如下：

struct SLATECORE_API FSlateFontInfo
{
	/**The font object (valid when used from UMG or a Slate widget style asset) */
	TObjectPtr<const UObject> FontObject;

	/**The material to use when rendering this font */
	TObjectPtr<UObject> FontMaterial;

	/**Settings for applying an outline to a font */
	FFontOutlineSettings OutlineSettings;

	/**The composite font data to use (valid when used with a Slate style set in C++) */
	TSharedPtr<const FCompositeFont> CompositeFont;

	/**The name of the font to use from the default typeface (None will use the first entry) */
	FName TypefaceFontName;

	/**
	 * The font size is a measure in point values. The conversion of points to Slate Units is done at 96 dpi.  So if 
	 * you're using a tool like Photoshop to prototype layouts and UI mock ups, be sure to change the default dpi 
	 * measurements from 72 dpi to 96 dpi.
	 */
	int32 Size;

	/**The uniform spacing (or tracking) between all characters in the text. */
	int32 LetterSpacing = 0;

	/**The font fallback level. Runtime only, don't set on shared FSlateFontInfo, as it may change the font elsewhere (make a copy). */
	EFontFallback FontFallback;
};

UE中有专门的字体编辑器，在C++中直接构造它比较麻烦，不过UE也提供了一些内置的 FSlateFontInfo ，比如：

FCoreStyle::Get().GetFontStyle("NormalFont")
FCoreStyle::Get().GetFontStyle("SmallFont")
FCoreStyle::GetDefaultFontStyle("Regular",FontSize);
FCoreStyle::GetDefaultFontStyle("Bold",FontSize)
FCoreStyle::GetDefaultFontStyle("Italic",FontSize);
FCoreStyle::GetDefaultFontStyle("Mono",FontSize);

FontMeasure

大多数GUI框架都有 字体测量（FontMeasure） 的概念：测量特定字体格式的某个文本的绘制宽度和高度。

在UE中，可以通过如下方式来测量（伪代码）：

FSlateApplication::Get().GetRenderer()->GetFontMeasureService()->Measure(
    const FText& Text,						//文本
    const FSlateFontInfo& InFontInfo,		//字体
    float FontScale							//字体缩放
) -> FVector2D								//返回宽度（X）和高度（Y）

性能优化

Slate为了优化UI的Paint和Tick性能，提供了一个 SInvalidationPanel 控件，该控件可以让子控件中消耗较高的操作进行缓存，只有当一些特定操作导致 缓存失效（Invalidate） ，才会重新执行。

详见：理解虚幻引擎Slate 架构 - 轮询数据流和委托 | 虚幻引擎5.2文档

我们可以手动调用子控件的Invalidate()函数来让缓存失效：

void SWidget::Invalidate(EInvalidateWidgetReason InvalidateReason);

EInvalidateWidgetReason 的值可以是：

enum class EInvalidateWidgetReason : uint8
{
	None = 0,
	Layout = 1 << 0,		//如果需要更改Widget所需的大小，请使布局无效。这是一个昂贵的无效操作，所以如果你只需要重新绘制一个小部件，就不要使用它
	Paint = 1 << 1,				//使绘制无效
	Volatility = 1 << 2,		//当Volatility变动时触发
	ChildOrder = 1 << 3,		//当添加或移除自控件时触发，使之无效会重建Child的顺序
	RenderTransform = 1 << 4,	//当RenderTransform变动时触发
	Visibility = 1 << 5,		//当可见性变动时触发
	AttributeRegistration = 1 << 6,		//绑定属性时触发
	Prepass = 1 << 7,					//使Prepass无效

	/**
	 * Use Paint invalidation if you're changing a normal property involving painting or sizing.
	 * Additionally if the property that was changed affects Volatility in anyway, it's important
	 * that you invalidate volatility so that it can be recalculated and cached.
	 */
	PaintAndVolatility = Paint | Volatility,
	/**
	 * Use Layout invalidation if you're changing a normal property involving painting or sizing.
	 * Additionally if the property that was changed affects Volatility in anyway, it's important
	 * that you invalidate volatility so that it can be recalculated and cached.
	 */
	LayoutAndVolatility = Layout | Volatility,
};

Slate提供了一种基于 属性（SlateAttribue） 的方式：让属性的变动跟缓存的重建挂钩

具体的做法是：

使用 TSlateAttribute 包裹属性（跟 TAttribute 的用途不同）， TSlateAttribute 包裹的属性在构造初始化时需要传递参数(*this)
在void WidgetType::PrivateRegisterAttributes(...)函数中，使用宏 SLATE_ADD_MEMBER_ATTRIBUTE_DEFINITION(_Initializer, _Property, _Reason) 来注册属性

这里有一个简短的示例：

class SCustomSlateWidget :public SLeafWidget {
	SLATE_DECLARE_WIDGET(SCustomSlateWidget, SLeafWidget)
public:
	SLATE_BEGIN_ARGS(SCustomSlateWidget){}
	SLATE_END_ARGS()
	void Construct(const SCustomSlateWidget::FArguments InArgs){			
	}
protected:
	SCustomSlateWidget()
		: ClickedCounter(*this) {	//初始化SlateAttribute
	}
	FReply OnMouseButtonDown(const FGeometry& MyGeometry, const FPointerEvent& MouseEvent) override {
		ClickedCounter.Set(*this, ClickedCounter.Get() + 1);		//计数器+1，这里把鼠标按下当做是点击
		return FReply::Handled();
	}
	int32 OnPaint(const FPaintArgs& Args, const FGeometry& AllottedGeometry, const FSlateRect& MyCullingRect, FSlateWindowElementList& OutDrawElements, int32 LayerId, const FWidgetStyle& InWidgetStyle, bool bParentEnabled) const override {
		static FSlateFontInfo FontInfo = FCoreStyle::GetDefaultFontStyle("Bold",30);
		FSlateDrawElement::MakeText(OutDrawElements, LayerId, AllottedGeometry.ToPaintGeometry(), FText::FromString(FString::FromInt(ClickedCounter.Get())), FontInfo);					//绘制当前鼠标点击的次数
		return LayerId;
	}
	FVector2D ComputeDesiredSize(float LayoutScaleMultiplier) const override {
		return FVector2D::ZeroVector;															
	}
private:
	TSlateAttribute<int> ClickedCounter;	 	//记录鼠标点击次数的计数器
};

SLATE_IMPLEMENT_WIDGET(SCustomSlateWidget)
void SCustomSlateWidget::PrivateRegisterAttributes(FSlateAttributeInitializer& AttributeInitializer) {
    //将ClickedCounter的值变动跟重绘事件挂钩
	//SLATE_ADD_MEMBER_ATTRIBUTE_DEFINITION(AttributeInitializer, ClickedCounter, EInvalidateWidgetReason::Paint);
}

FSlateApplication::Get().AddWindow(
    SNew(SWindow)
    .SupportsMaximize(false)
    .SupportsMinimize(false)
    .IsTopmostWindow(true)
    .ClientSize(FVector2D(200,200))
    .SizingRule(ESizingRule::FixedSize)
    .CreateTitleBar(false)
    .AutoCenter(EAutoCenter::PreferredWorkArea)
    [
        SNew(SInvalidationPanel)			// 使用SInvalidationPanel包括
        [
            SNew(SCustomSlateWidget)
        ]
    ]
);

该代码创建了一个可点击的方块：

点击方块会让ClickedCounter+1，但画面不会发生任何变化，当取消PrivateRegisterAttributes中注释的代码：

void SCustomSlateWidget::PrivateRegisterAttributes(FSlateAttributeInitializer& AttributeInitializer) {
    //将ClickedCounter的值变动跟重绘事件挂钩
	SLATE_ADD_MEMBER_ATTRIBUTE_DEFINITION(AttributeInitializer, ClickedCounter, EInvalidateWidgetReason::Paint);
}

重新启动程序，可以发现，当ClickedCounter变更时，UI会重新绘制：

从Slate到UMG

UE的逻辑编程建立在UObject之上，而Slate为了追求极致的性能，并没有使用UObject这种沉重的机制去管理UI对象

在Slate中，使用的是 共享指针（Shared Pointer） 的方式来管理UI对象的生命周期

为了提升游戏开发者的UI开发效率，UE使用UObject对Slate控件包裹了一层，通过反射暴露了Slate控件的一些属性和函数，同时支持了可视化的UI设计，这一层接口也就是我们熟知的 UMG

关于 UMG ，官方文档中有详细的介绍：

https://docs.unrealengine.com/5.2/zh-CN/umg-ui-designer-for-unreal-engine/

这里有一个简短的代码很好地体现了Slate和UMG的关系：

#pragma once

#include "UObject/ObjectMacros.h"
#include "Widgets/Text/STextBlock.h"
#include "Components/Widget.h"
#include "CustomUWidget.generated.h"

UCLASS(meta = (DisplayName = "CustomWidget"))					//DisplayName是控件名称
class UMGEXTENDUTILITIES_API UCustomWidget : public UWidget
{
	GENERATED_BODY()
protected:
	virtual TSharedRef<SWidget> RebuildWidget() override {						//重建控件，并赋值给成员变量
		return SAssignNew(MyTextBlock,STextBlock);
	}
	virtual void SynchronizeProperties() override {								//将UObejct的属性同步到Slate控件中
		MyTextBlock->SetText(Text);
		Super::SynchronizeProperties();
	}
	virtual void ReleaseSlateResources(bool bReleaseChildren) override {		//释放Slate资源
		MyTextBlock.Reset();
	}

#if WITH_EDITOR
	virtual const FText GetPaletteCategory() override {							//在编辑器上的控件分类
		return FText::FromString("CustomCategory");
	}
#endif

public:
	UFUNCTION(BlueprintCallable)		//公开函数到蓝图
	FText GetText() const {
		return Text;
	}
	UFUNCTION(BlueprintCallable)
	void SetText(FText InText) {
		Text = InText;
		if (MyTextBlock) {				//设置属性，当控件已经创建的时候，直接把值塞到控件里面
			MyTextBlock->SetText(Text);
		}
	}
protected:
	UPROPERTY(EditAnywhere, BlueprintGetter = "GetText", BlueprintSetter = "SetText")
	FText Text;							//公开属性到编辑器

	TSharedPtr<STextBlock> MyTextBlock;	//实际的Slate控件
};

在C++中，使用UMG的方法是：

UWidget* UMGWidget = LoadObject<UWidget>(nullptr, TEXT("{AssetPath}"));    			   //从资产加载，也可以NewObject
TSharedPtr<SWidget> SlateWidget = UMGWidget->TakeWidget();                             //该操作会创建一个新的SWidget，
TSharedPtr<SWidget> CachedSlateWidget = UMGWidget->GetCachedWidget();                  //获取上一次创建的SWidget
//之后再使用Slate的使用方式

生命周期管理

UWidget 走的是 UObject 的垃圾回收，它持有了 SWidget 的共享指针，为了保证控件在显示时（TSharedPtr<SWidget>还存在时）， UWidget 不会被当成垃圾回收，UMG使用了一个继承自 FGCObject 的控件 SObjectWidget 对 UWidget 增加了引用

再回到上面的示例代码中，可以了解到，调用UWidget::TakeWidget()得到的并不是 UWidget::RebuildWidget()中创建的控件，而是对其又用 SObjectWidget 包裹了一层，它们在创建过程中的层次关系如下：

在销毁时，它们的释放顺序如下：

SObjectWidget 继承自 FGCObject ，它会添加对UWidget的引用，保证 SObjectWidget 存在时， UWidget 不会被GC
当控件开始销毁时， SObjectWidget 的引用计数为0会被销毁，此时会解除对 UWidget 的引用
当 UWidget 的引用为0，则会在下一次垃圾回收时将其释放，此时才会释放其持有的 SWidget 共享指针

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

1.Slate开发.md

1.Slate开发.md

基础

基本使用

基本概念

SWidget

SWindow

开发流程

控件一览

基础

文本

颜色

图像

导航

通知

控件容器（SPanel）

布局与尺寸

视图

停靠窗口

其他

代码参考

高级定制

交互事件

绘制事件

FSlateBrush

示例

ESlateDrawEffect

FSlateFontInfo

FontMeasure

性能优化

从Slate到UMG

生命周期管理

Files

1.Slate开发.md

Latest commit

History

1.Slate开发.md

File metadata and controls

基础

基本使用

基本概念

SWidget

SWindow

开发流程

控件一览

基础

文本

颜色

图像

导航

通知

控件容器（SPanel）

布局与尺寸

视图

停靠窗口

其他

代码参考

高级定制

交互事件

绘制事件

FSlateBrush

示例

ESlateDrawEffect

FSlateFontInfo

FontMeasure

性能优化

从Slate到UMG

生命周期管理