Unreal Engine 5 ドキュメントは Epic Developer Community に移動しました

Unreal Engine 4.26

Unreal Engine 4.27

Unreal Engine 5.0

Unreal Engine 5.1

Unreal Engine 5.2

Unreal Engine 5.3

> プログラミングとスクリプト処理 > スレート UI フレームワーク > スレートウィジェットのサンプル

Light Theme

Dark Theme

スレートウィジェットのサンプル

Slate Viewer Widget Gallery で実演されないレイアウトとウィジェットの複雑性

Choose your operating system:

Windows

macOS

Linux

コンテンツ

共通のスレート引数
- 可視性
- アライメント
ボックスパネル
ラジオボタン
メニューとツールバー
アイテム表示

共通のスレート引数

次の引数は、作成された単一ウィジェットに共通です。

IsEnabled - ウィジェットを操作可能にするかどうかを指定します。無効にすると、表示がグレーアウトになります。
ToolTip - このウィジェットのツールヒントに使用するカスタム SToolTip ウィジェットのタイプを指定します。指定しない場合、ToolTip は表示されません。
ToolTipText - このウィジェットのツールチップとして、簡易なツールヒントに表示するテキストのタイプを指定します。指定しない場合、または ToolTip 属性が使用されている場合、ToolTipText は表示されません。
Cursor - マウスがこのウィジェット上に置かれた時に表示するカーソルを指定します。
Visibility - 以下の「可視性」セクションを参照してください。

以下の引数は、すべてではありませんが、ほとんどのウィジェットに設定されています。

Text - 該当する場合、ウィジェットが使用するテキストを指定します。
Content - 該当する場合、ウィジェットのコンテンツセクションに配置できるウィジェットを指定します。
ReadOnly - true の場合、このウィジェットを編集不可にします。
Style - 画像のスタイルまたはウィジェットが使用するテキストのフォントを指定します。適用方法はウィジェットによって異なります。
[...]ColorAndOpacity - ウィジェットのカラーやオパシティ、またはウィジェットの指定システムです。
Padding - ウィジェットのパディングです。親のウィジェットの上部、左、右、そして下部周りに設定するパディングの間隔をスレート単位で表します。1 つの値を 4 ヶ所に指定する、もしくは水平や垂直値、またはそれぞれ異なる 4 つの値を指定できます。
HAlign - ウィジェット内のコンテンツの水平方向の整列です。
VAlign - ウィジェット内のコンテンツの垂直方向の整列です。

可視性

ウィジェットの可視性は、ウィジェットの表示方法とインタラクティビティを決定します。

Visible (デフォルト) - ウィジェットは通常表示されます。
Collapsed - レイアウトでウィジェットは非表示となり、スペースを取りません。インタラクティブにはなりません。
Hidden - ウィジェットは非表示となりますが、レイアウトでスペースを取ります。インタラクティブにはなりません。
HitTestInvisible - ユーザーに対してアートとしてのみ表示されます。インタラクティブにはなりません。
SelfHitTestInvisible - HitTestInvisible と同じですが、子ウィジェットには利用できません。

アライメント

ウィジェットのアライメントは、親ウィジェット内でのウィジェットの位置を決定します。親ウィジェットのサイズがウィジェットと同一の場合 (パディングを除く)、アライメントは意味をなしません。この現象は、ウィジェットに「Fill」、またはボックススロットに「Full Size」を指定した時、ボックススロットにデフォルトで発生します。

以下のアライメントを利用することができます。

HAlign_Fill/VAlign_Fill
HAlign_Left
VAlign_Top
HAlign_Center/VAlign_Center
HAlign_Right
VAlign_Bottom

ボックスパネル

SHorizontalBox と SVerticalBox は、レイアウトのアレンジに最も使用頻度の高いウィジェットです。これらのボックスはウィジェットとして宣言しますが、ボックスにはスロットが挿入されています。SHorizontalBoxes は、左側の最初のウィジェットと右側の最後のウィジェットにスロットを配置するのに対し、SVerticalBoxes はスロットを上から下へ配置します。

SScrollBox は SVerticalBox と同じ機能ですが、子スロットの垂直スクロールが可能です。

スロットの属性

Width (横) またはHeight (高さ) の設定 (以下のオプションは相互排他的です) :
- Auto Size (デフォルト) - 必要以上でも以下でもなく、必要なだけの間隔をスロットに埋めるように指定します。スロット内のアライメントは、ここでは重要ではありません。
- Fill Size - fill 係数を指定すると、別のスロットの fill 係数に基づいてスロットが埋められます。同一方向のスロットのアライメントは、ここでは重要ではありません。
Max Size - スロットに設定できる最大サイズをスレート単位で指定します。
Padding - パネル内のスロットのパディングを指定します。
Alignment - スロット内の子ウィジェットの整列方法を決定します。Fill Size の配置が同じ方向に指定された場合、このオプションは意味をなしません。

以下は、スクロールボックス内にネストさせた自動的にサイズ変更する平行ボックスと、fill のサイズに設定された平行ボックスの例です。さらに、これらのスロットとアライメントの使用方法も表示しています。

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)
[
    ...
]

ラジオボタン

チェックボックスはボックスのチェック方法の決定にデリゲートが必要なため、スレートのチェックボックスは ラジオボタン です。一連のラジオボタンの作成は、列挙型変数を作成してチェックを入れるボックスを決定するのが最も簡単な方法です。現在の選択を判断する列挙型変数のインスタンスを保存します。その後、デリゲートをチェックするために、渡された正確な列挙型変数のペイロードと現選択を比較する関数を渡します。選択を変更する際に、現在の選択が更新されなくてはいけません。

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;
    }
}

メニューとツールバー

メニュー

メニューまたはツールバーの作成にマルチボックスを使用します。動的に生成されたボタン / 制御で使用することはできなくても、コマンドはスレートの UI_COMMAND システムを使用しなくてはいけません。

メニューの作成は、 FUICommandList を渡して FMenuBarBuilder を作成します。これで、配置するウィジェットを取得するためにメニューバービルダーで 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 デリゲートが渡されて動的に追加され、その他のウィジェットはカラムごとに生成されます。

リスト表示

リスト表示は、子ウィジェットのリストを格納するウィジェットです。They are made as 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 )

Unreal Engine のドキュメントを改善するために協力をお願いします！どのような改善を望んでいるかご意見をお聞かせください。

調査に参加する

キャンセル

スレート ウィジェットのサンプル