Choose your operating system:
Windows
macOS
Linux
通用Slate参数
以下参数通用于创建的所有控件。
IsEnabled——指定是否能够与控件交互。如果禁用,则显示为灰色。
ToolTip——指定该控件工具提示将使用哪一类自定义SToolTip控件。如果不指定,则不显示。
ToolTipText——指定将显示哪一类文本作为该控件工具提示的简单提示文本。如果不指定,或者使用了ToolTip属性,则不显示。
Cursor——指定鼠标悬浮于该控件时将显示的光标。
Visibility——请参阅下面的"可视性"部分。
以下参数并不能适用于所有控件,但它们适用于大多数控件。
Text——指定该控件拥有的文本(如果适用)。
Content——指定应在控件内容部分中放置哪个控件(如果适用)。
ReadOnly——如果为_true_,阻止编辑该控件。
Style——指定控件使用的图像或字体样式。适用情况取决于控件。
[...]ColorAndOpacity——控件或指定系统的颜色和不透明度。
Padding——以slate单位表示的控件空间填充量,这里指在父代内控件的上下左右部分的空间。可以为所有四个部分指定一个值、指定一个水平和一个垂直值或者指定为四个单独的值。
HAlign——控件内部内容水平对齐。
VAlign——控件内部内容垂直对齐。
可视性
控件可视性决定了控件如何显示及其交互性。
Visible(默认值)——控件正常显示。
Collapsed——控件不可见,并且在局部中不占据空间。不可交互。
Hidden——控件不可见,但在布局中占据空间。不可交互。
HitTestInvisible——对用户可见,但仅显示为图片。不可交互。
SelfHitTestInvisible——与HitTestInvisible相同,但不适用于子控件。
对齐
控件对齐决定了控件在其父代内部的位置。如果控件的父代与控件尺寸相同(不包含填充空间),则对齐没有意义。对于盒插槽,当您为该控件指定"填充(Fill)"或盒插槽指定"填充大小"(Fill Size)时,默认属于这种情况。
可能的对齐如下所示:
HAlign_Fill/VAlign_Fill
HAlign_Left
VAlign_Top
HAlign_Center/VAlign_Center
HAlign_Right
VAlign_Bottom
盒面板
SHorizontalBox 和 SVerticalBox 是设计布局时最常用的控件。这些盒面板声明为控件,但它们中间也会插入插槽。SHorizontalBox中的这些插槽的布局方式是第一个控件位于最左侧,最后一个位于最右侧,而SVerticalBox是自上而下布局。
SScrollBox 函数类似于SVerticalBox,唯一不同的是允许子插槽垂直滚动。
插槽属性
宽度或高度设置(以下选项互斥):
自动大小(默认值)——指定插槽将根据需要填充空间,但不会超额。插槽内的对齐不重要。
填充大小——指定填充系数将使其根据其他插槽的填充系数占据空间。朝着同一方向的插槽对齐不重要。
最大大小——指定插槽可以拥有的最大大小,使用slate单位。
填充——指定面板内的插槽填充。
对齐——指定子控件如何在插槽内对齐。如果以相同方向指定"填充大小",则该选项毫无意义。
以下是滚动盒中嵌套的自定大小水平盒和填充大小水平盒的示例。此外还显示了如何对这些插槽使用对齐。
SNew(SScrollBox)
+SScrollBox::Slot() .Padding(10,5)
[
SNew(SHorizontalBox)
+SHorizontalBox::Slot() .HAlign(HAlign_Left)
[
...
]
+SHorizontalBox::Slot() .HAlign(HAlign_Center)
[
...
]
+SHorizontalBox::Slot() .HAlign(HAlign_Right)
[
...
]
]
+SScrollBox::Slot() .Padding(10,5)
[
SNew(SHorizontalBox)
+SHorizontalBox::Slot() .FillWidth(2)
[
...
]
+SHorizontalBox::Slot() .FillWidth(1)
[
...
]
+SHorizontalBox::Slot() .FillWidth(3)
[
...
]
]
统一网格面板
SUniformGridPanel 是一个均匀地垂直和水平分发子控件的面板。其子插槽使用一对整数指定,它们指定子代的索引。下面是一个统一网格面板。
SNew(SUniformGridPanel)
.SlotPadding( FMargin( 5.0f ) )
+SUniformGridPanel::Slot(0,0)
.HAlign(HAlign_Right)
[
...
]
+SUniformGridPanel::Slot(0,1)
.HAlign(HAlign_Right)
[
...
]
+SUniformGridPanel::Slot(0,2)
.HAlign(HAlign_Center)
[
...
]
+SUniformGridPanel::Slot(1,0)
[
...
]
+SUniformGridPanel::Slot(1,1)
[
...
]
包围盒
SWrapBox 是一个水平排列控件的盒,这些控件超过一定宽度后,继续在下一行排列,以此类推。下面是一个示例。
SNew(SWrapBox)
.PreferredWidth( 300.f )
+SWrapBox::Slot()
.Padding( 5 )
.VAlign(VAlign_Top)
[
...
]
+SWrapBox::Slot()
.Padding( 5 )
.VAlign(VAlign_Bottom)
[
...
]
+SWrapBox::Slot()
.Padding( FMargin(20, 5, 0, 5) )
.VAlign(VAlign_Center)
[
...
]
+SWrapBox::Slot()
.Padding( 0 )
.VAlign(VAlign_Fill)
[
...
]
单选按钮
单选按钮 是slate中的复选框,因为复选框需要用于确定它们是否被选中的委托。为了创建一系列单选按钮,最简单的方法是创建用于确定选中了哪个复选框的列举。保存用于确定当前选项的列举实例。然后,对于检查委托,传递一个函数来比较正确列举的传入有效内容与当前选择。在更改选项时,需要更新当前选项。
ERadioChoice CurrentChoice;
...
ECheckBoxState::Type IsRadioChecked( ERadioChoice ButtonId ) const
{
return (CurrentChoice == ButtonId)
?ECheckBoxState::Checked
:ECheckBoxState::Unchecked;
}
...
void OnRadioChanged( ERadioChoice RadioThatChanged, ECheckBoxState::Type NewRadioState )
{
if (NewRadioState == ECheckBoxState::Checked)
{
CurrentChoice = RadioThatChanged;
}
}
菜单和工具栏
菜单
要创建菜单或工具栏,使用多箱。命令应当使用Slate的UI_COMMAND系统,虽然这可以通过动态生成的按钮/控件完成。
要创建菜单,使用 FMenuBarBuilder 和传入的 FUICommandList,您可以在菜单栏构建器上调用 MakeWidget() 来放置控件。
FMenuBarBuilder MenuBarBuilder( CommandList );
{
MenuBarBuilder.AddPullDownMenu( TEXT("Menu 1"), TEXT("Opens Menu 1"), FNewMenuDelegate::CreateRaw( &FMenus::FillMenu1Entries ) );
MenuBarBuilder.AddPullDownMenu( TEXT("Menu 2"), TEXT("Opens Menu 2"), FNewMenuDelegate::CreateRaw( &FMenus::FillMenu2Entries ) );
}
return MenuBarBuilder.MakeWidget();
在创建的菜单中,您可以向菜单添加创建的菜单标题、条目、分隔符、子菜单、可编辑文本或自定义控件。
static void FillMenu1Entries( FMenuBuilder& MenuBuilder )
{
MenuBuilder.AddEditableText( TEXT( "Editable Item" ), TEXT( "You can edit this item's text" ), NAME_None, TEXT( "Edit Me!") );
MenuBuilder.AddMenuEntry( FMultiBoxTestCommandList::Get().EighthCommandInfo );
MenuBuilder.AddMenuSeparator();
MenuBuilder.AddSubMenu( TEXT("Sub Menu"), TEXT("Opens a submenu"), FNewMenuDelegate::CreateRaw( &FMenus::FillSubMenuEntries ) );
MenuBuilder.AddWidget(SNew(SVolumeControl), TEXT("Volume"));
}
情境菜单
要调用其中一个子菜单作为情境菜单,从 FMenuBuilder 生成该控件,并传递给 PushMenu() 函数,如下所示。
FSlateApplication::Get().PushMenu(
MenuBuilder.MakeWidget(),
MouseCursorLocation,
FPopupTransitionEffect( FPopupTransitionEffect::ContextMenu )
);
工具栏
要创建工具栏,使用 FToolBarBuilder。对于子代,您可以添加工具栏按钮、组合框按钮、普通按钮和下拉菜单。
FToolBarBuilder GameToolBarBuilder( InCommandList );
{
GameToolBarBuilder.AddToolBarButton( FLevelEditorCommands::Get().Simulate );
GameToolBarBuilder.AddToolBarButton(
FLevelEditorCommands::Get().RepeatLastPlay,
LOCTEXT("RepeatLastPlay", "Play"),
TAttribute< FString >::Create( TAttribute< FString >::FGetter::CreateRaw( &FLevelEditorActionCallbacks::GetRepeatLastPlayToolTip ) ),
TAttribute< const FSlateBrush* >::Create( TAttribute< const FSlateBrush* >::FGetter::CreateRaw( &FLevelEditorActionCallbacks::GetRepeatLastPlayIconSlateBrush ) )
);
GameToolBarBuilder.AddComboButton(
SpecialPIEOptionsMenuAction,
FOnGetContent::CreateRaw( &FLevelEditorToolBar::GeneratePIEMenuContent, InCommandList ),
FText(),
LOCTEXT("PIEComboToolTip", "Play-In-Editor options") );
}
return GameToolBarBuilder.MakeWidget();
项目视图
这些视图采用指向某一类数据的共享指针的模板参数。它们根据数据类型由 TArray 或 TSharedPtr 填充。这些内部控件使用传入的 OnGenerateRow 或 OnGenerateTile 委托动态填充,针对每个列生成不同的控件。
列表视图
列表视图是用于存储一列子控件的控件。他们被设为`SListView<...>`。
SNew( SListView< TSharedPtr<FTestData> > )
.ItemHeight(24)
.ListItemsSource( &Items )
.OnGenerateRow( this, &STableViewTesting::OnGenerateWidgetForList )
.OnContextMenuOpening( this, &STableViewTesting::GetListContextMenu )
.SelectionMode( this, &STableViewTesting::GetSelectionMode )
.HeaderRow
(
SNew(SHeaderRow)
+ SHeaderRow::Column("Name")
[
SNew(SBorder)
.Padding(5)
.Content()
[
SNew(STextBlock)
.Text(TEXT("Name"))
]
]
+ SHeaderRow::Column("Number") .DefaultLabel(TEXT("Number"))
+ SHeaderRow::Column("TextField") .DefaultLabel(TEXT("Text Field"))
+ SHeaderRow::Column("TextBlock") .DefaultLabel(TEXT("Text Block"))
+ SHeaderRow::Column("AddChild") .DefaultLabel(TEXT("Add Child"))
)
树形视图
设为`STreeView<...>`的树形视图类似于列表视图,唯一不同的是它们支持将控件设为列表中其他控件的父代。要确定哪些控件是哪些控件的父代,使用 **OnGetChildren** 委托将传入项目的子代传回。
SNew( STreeView< TSharedPtr<FTestData> > )
.ItemHeight(24)
.TreeItemsSource( &Items )
.OnGenerateRow( this, &STableViewTesting::OnGenerateWidgetForTree )
.OnGetChildren( this, &STableViewTesting::OnGetChildrenForTree )
.OnContextMenuOpening( this, &STableViewTesting::GetTreeContextMenu )
.SelectionMode( this, &STableViewTesting::GetSelectionMode )
.HeaderRow
(
SNew(SHeaderRow)
+ SHeaderRow::Column("Name") .DefaultLabel(TEXT("Name"))
+ SHeaderRow::Column("Number") .DefaultLabel(TEXT("Number"))
+ SHeaderRow::Column("TextField") .DefaultLabel(TEXT("Text Field"))
+ SHeaderRow::Column("TextBlock") .DefaultLabel(TEXT("Text Block"))
+ SHeaderRow::Column("AddChild") .DefaultLabel(TEXT("Add Child"))
)
平铺视图
设为`STileView<...>`的平铺视图类似于列表视图,唯一不同的是子代控件在网格中布局,而不是列表。因此,它们不支持列或列标题。
SNew( STileView< TSharedPtr<FTestData> > )
.ItemWidth(128)
.ItemHeight(64)
.ListItemsSource( &Items )
.OnGenerateTile( this, &STableViewTesting::OnGenerateWidgetForTileView )
.OnContextMenuOpening( this, &STableViewTesting::GetTileViewContextMenu )
.SelectionMode( this, &STableViewTesting::GetSelectionMode )