【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有很多子类,但我觉得其中最常用的是:

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

他们的继承关系如下:

SWidget
SPanel
SBoxPanel
SOverlay
SBox
SHorizontalBox
SVerticalBox

开始实践

“编辑器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)//占满剩余空间
]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值