【UE4编辑器扩展】Slate控件排布的管理者：SPanel

SPanel

A Panel arranges its child widgets on the screen.
Each child widget should be stored in a Slot. The Slot describes how the individual child should be arranged with respect to its parent (i.e. the Panel) and its peers Widgets (i.e. the Panel’s other children.)
For a simple example see StackPanel.

SPanel负责将子控件排列在屏幕上。每一个子控件都必须存放在一个Slot中。而Slot描述了每个单独的子控件将如何根据其父控件（即SPanel）和他同级的控件（即SPanel的其他子控件）来进行排布。简单的例子可以看“StackPanel”。

SPanel有很多子类，但我觉得其中最常用的是：

• 有关水平和垂直方向排布的SHorizontalBox和SVerticalBox
• 有关层级排布的SOverlay。
• 此外，我还常用SBox来指定固定尺寸的控件

他们的继承关系如下：

开始实践

以 “编辑器Standalone窗口” 为模板创建插件

控件的代码将放到这里

使用 SHorizontalBox 指定水平方向排布

// Put your tab content here!
SNew(SHorizontalBox)
+ SHorizontalBox::Slot().FillWidth(0.3f)//占30%
[
	SNew(SButton)
]
+ SHorizontalBox::Slot().FillWidth(0.7f)//占70%
[
	SNew(SButton)
]

使用 SVerticalBox 指定垂直方向排布

代码改动如下：

使用 SOverlay 在层级方向上排布

代码改动如下：

使用 SBox 指定特定的尺寸

代码改动如下：

最终代码

// Put your tab content here!
SNew(SOverlay)
+ SOverlay::Slot()//底层
[
	SNew(SHorizontalBox)
	+ SHorizontalBox::Slot().FillWidth(0.3f)//占30%
	[
		SNew(SButton)
	]
	+ SHorizontalBox::Slot().FillWidth(0.7f)//占70%
	[
		SNew(SVerticalBox)
		+ SVerticalBox::Slot().FillHeight(0.5f)//占50%
		[
			SNew(SButton)
		]
		+ SVerticalBox::Slot().FillHeight(0.5f)//占50%
		[
			SNew(SButton)
		]
	]
]
+ SOverlay::Slot()//顶层
[
	SNew(SHorizontalBox)
	+ SHorizontalBox::Slot().FillWidth(1.0f)//占满剩余空间
	+ SHorizontalBox::Slot().AutoWidth()
	[
		SNew(SVerticalBox)
		+ SVerticalBox::Slot().FillHeight(1.0f)//占满剩余空间
		+ SVerticalBox::Slot().AutoHeight()
		[
			SNew(SBox)
			.HeightOverride(128)
			.WidthOverride(128)
			[
				SNew(SButton)
			]
		]
		+ SVerticalBox::Slot().FillHeight(1.0f)//占满剩余空间
	]
	+ SHorizontalBox::Slot().FillWidth(1.0f)//占满剩余空间
]