前言：

笔者目前在校本科大三，目标方向是人工智能、计算机视觉。上一个OpenCV学习笔记专栏已完结，在学习完OpenCV后，我继续学习C++，并用纯C++做UE4项目的方式继续提升自己的水平。

梁迪老师的水平非常高，他的课程本来也无需笔记：课程本身即为最好的笔记。但由于我天赋有限，还是边看边记，以防遗忘——知识点太多，步骤太繁杂了。在学习过程中，我也偶有思考，思索为什么某个方法老师要这样做。所以，一是为了记录，二是为了分享，才有了这个专栏。

内容方面，由于我在开启这个专栏时，此项目已经做完很多了。所以，前期的一些大篇幅叙述的知识，可能在后期应用中一带而过。以及，前期的一些知识，后期会重新剖析，并加上我的个人理解。

另外，若有学术交流/学业交流意愿，可以邮件联系1246210283@qq.com，希望一齐进步。

---

本篇学习内容：

1.创建Slate、使用WidgetStyle设置样式
2.DPI屏幕适配
3.修改slot

---

1.创建Slate、使用WidgetStyle设置样式

创建Slate：

TSharedPtr<class SSlAiMenuHUDWidget> MenuHUDWidget;

ASlAiMenuHUD::ASlAiMenuHUD()
{
    if (GEngine && GEngine->GameViewport) {
        SAssignNew(MenuHUDWidget, SSlAiMenuHUDWidget);

        GEngine->GameViewport->AddViewportWidgetContent(SNew(SWeakWidget).PossiblyNullContent(MenuHUDWidget.ToSharedRef()));

    }
}

/**
 * Slate widgets are constructed through SNew and SAssignNew.
 * e.g.
 *      
 *     TSharedRef<SButton> MyButton = SNew(SButton);
 *        or
 *     TSharedPtr<SButton> MyButton;
 *     SAssignNew( MyButton, SButton );
 *
 * Using SNew and SAssignNew ensures that widgets are populated
 */

使用WidgetStyle设置样式：

创建一个SlateWidgetStyle类，创建一个空类

用空C++类来获取样式

FSlateStyleSet ：用于注册样式

2.DPI屏幕适配

首先，一个SlateWidget的蓝图对应一个widget的childslot，可以在childslot中添加图片等。

屏幕适配的曲线在UE4 Project Setting 下的 User Interface中，该曲线可以自己写。

如何自己写缩放曲线：

(1) 在SSlAiMenuHUDWidget.h中创建 DPI缩放系数、DPI缩放函数

private:
	float GetUIScaler() const;
	TAttribute<float> UIScaler;

(2) 在SSlAiMenuHUDWidget.cpp中绑定缩放规则方法：

	UIScaler.Bind(this, &SSlAiMenuHUDWidget::GetUIScalar);

(3) 实现DPI缩放函数
(4) 让窗口知道需要缩放多少，所以需要写一个组件

#include "SDPIScaler.h"

在childslot中：

	SNew(SDPIScaler)
	.DPIScale(UIScaler)

并且让该组件包含下面所有组件。
以后，所有的组件都会放在该childslot下，HUDWidget是最底层的，并且内部所有组件都会受到UIScaler限制。

3.修改Slot

Overlay：Overlay相当于一个盒子，可以在里面布置组件，我们可以利用他的多槽。比如，要在Button周围添加一些小图片，还要给Button里面添加文字，就需要用到Overlay，因为Button只有一个槽。

首先，在SSlAiMenuHUDWidget.h中创建一个参数

	#include "SOverlay.h"
	SOverlay::FOverlaySlot* ImageSlot;

然后在SSlAiMenuHUDWidget.cpp中 在childslot中 将SOverlay::Slot赋值到定义的ImageSlot上面：

	+SOverlay::Slot()
	.HAlign(HAlign_Center)
	.VAlign(VAlign_Center)
	.Expose(ImageSlot)

这样，我们就可以通过修改ImageSlot来修改Slot的属性

例如，在childslot中 继续添加：

	+SOverlay::Slot()
		.HAlign(HAlign_Left)
		.VAlign(VAlign_Top)
		[
			SNew(SButton)
			//点击这个按钮时，执行绑定的Onclick函数
			.OnClicked(this,&SSlAiMenuHUDWidget::Onclick)	
		]

其中，Onclick函数的作用是让ImageSlot对应的Slot的SImage移动到右下角：

	FReply SSlAiMenuHUDWidget::Onclick()
	{
		ImageSlot->HAlign(HAlign_Right).VAlign(VAlign_Bottom);
		return FReply::Handled();
	}