UE4 STreeView的使用和示例(C++实现)

最新推荐文章于 2024-02-22 21:08:23 发布
最新推荐文章于 2024-02-22 21:08:23 发布
阅读量3.6k 收藏 19
点赞数 12
分类专栏： UE4 文章标签： c++
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wymdhr/article/details/104313596
版权

STreeView介绍：

  STreeView是UE提供的一个控件，其已经实现好一套框架，能够根据给定数据自动生成一个树形结构控件，UE的资源目录(SPathView.h)以及大纲视图（SOutlineTreeView.h）里的树状结构都是用此控件生成的。
  STreeView提供了丰富的接口，可以根据需要在构建控件时传入参数即可，这里介绍最简单的使用方法，只需要提供数据(TreeItemsSource)、生成Item方法(OnGenerateRow)、获取某个节点的子节点方法(OnGetChildren)，具体是实现给定一个目录，用STreeView实现查看此目录下所有文件和文件夹。如下图所示：
在这里插入图片描述
  数据：实际上是一个数组，存储的是树所有根节点信息，每个节点需要存储节点需要表示的信息、父节点引用、子节点引用。

  生成Item方法：给定一个节点，自定义实现需要显示的内容，返回一个Widget用于Item的显示。一般会根据节点里存储的必要信息去生成文本控件，图片控件等去显示Item。

  获取某个节点的子节点方法：给定节点，返回其所有的子节点。这里可以做很多自定义，例如筛选功能就可以在这里根据规则只把所有子节点的符合要求的返回即可。

实例详细步骤：

  1、创建C++工程TreeViewDemo。
  2、创建自定义TreeView控件。在Source内创建STreeViewDemo类(S版控件)以及TreeViewWidgetDemo类(U版控件)，对于为什么创建这两个类可以先了解一下UE Slate相关知识。
  Build.cs，添加依赖 “UMG”、 “Slate”、 “SlateCore”、 “EditorStyle”


using UnrealBuildTool;

public class TreeViewDemo : ModuleRules
{
	public TreeViewDemo(ReadOnlyTargetRules Target) : base(Target)
	{
		PCHUsage = PCHUsageMode.UseExplicitOrSharedPCHs;
	
		PublicDependencyModuleNames.AddRange(new string[] { "Core", "CoreUObject", "Engine", "InputCore", "UMG", "Slate", "SlateCore", "EditorStyle" });

		PrivateDependencyModuleNames.AddRange(new string[] {  });
	}
}

  STreeViewDemo.h

#pragma once

#include "CoreMinimal.h"
#include "Widgets/SCompoundWidget.h"
#include "Widgets/Views/STableViewBase.h"
#include "Widgets/Views/STableRow.h"
#include "Widgets/Views/STreeView.h"

class FTreeViewInstanceData
{
public:
	//用于构造根节点
	FTreeViewInstanceData(const FString& InPath);

	//用于构造子节点
	FTreeViewInstanceData(const FString& InPath, TSharedPtr<FTreeViewInstanceData>&InParent);

	//获得条目标志的Icon，用于区分目录还是文件
	TSharedPtr<SWidget> CreateIcon() const;

public:
	// 目标路径
	FString DiskPath;

	// 路径最后的名字，如D:\Program Files (x86)\PVS-Studio，Name=PVS-Studio，若路径指向一个文件，则Name是不带扩展名的文件名 
	FString CleanName;

	// 标志DiskPath指向的是一个文件还是目录
	bool bIsDirectory;

	//记录此节点对应的父节点
	TSharedPtr<FTreeViewInstanceData> Parent;

	//记录此节点对应的所有子节点
	TArray<TSharedPtr<FTreeViewInstanceData>> Children;
};

class STreeViewDemo : public SCompoundWidget
{
	SLATE_BEGIN_ARGS(STreeViewDemo) 
	:_RootPath("")
	{}
		SLATE_ARGUMENT(FString, RootPath)
	SLATE_END_ARGS()
public:
	/** Constructs this widget with InArgs */
	virtual void Construct(const FArguments& InArgs);
	
private:
	typedef TSharedPtr<FTreeViewInstanceData> FTreeViewInstanceItem;
	typedef STreeView<FTreeViewInstanceItem> STreeViewPtr;
	//根据根目录路径初始化TreeRootItems
	void InitTreeView(const FString& InRootPath);

	void ConstructChildrenRecursively(FTreeViewInstanceItem TreeItem);

	//创建TreeItem的函数
	TSharedRef<ITableRow> GenerateTreeRow(FTreeViewInstanceItem TreeItem, const TSharedRef<STableViewBase>& OwnerTable);

	//获取某个节点的子节点信息
	void GetChildrenForTree(FTreeViewInstanceItem TreeItem, TArray< FTreeViewInstanceItem >& OutChildren);
private:
	//实际的TreeView
	TSharedPtr<STreeViewPtr> TreeViewPtr;

	//包含所有根节点的数组
	TArray<FTreeViewInstanceItem> TreeRootItems;
};

  STreeViewDemo.cpp

#include "STreeViewDemo.h"
#include "Misc/Paths.h"
#include "EditorStyleSet.h"
#include "Styling/SlateTypes.h"
#include "Widgets/Images/SImage.h"
#include "Widgets/Text/STextBlock.h"
#include "Widgets/SBoxPanel.h"
#include "HAL/FileManager.h"

void STreeViewDemo::Construct(const FArguments& InArgs)
{
	InitTreeView(InArgs._RootPath);
	SAssignNew(TreeViewPtr, STreeViewPtr)
		.TreeItemsSource(&TreeRootItems)
		.OnGenerateRow(this, &STreeViewDemo::GenerateTreeRow)
		.ItemHeight(30)
		.SelectionMode(ESelectionMode::Multi)
		.OnGetChildren(this, &STreeViewDemo::GetChildrenForTree)
		.ClearSelectionOnClick(false)
		.HighlightParentNodesForSelection(true);
	this->ChildSlot
		[
			TreeViewPtr.ToSharedRef()
		];
}

void STreeViewDemo::InitTreeView(const FString& InRootPath)
{
	FTreeViewInstanceItem Root = FTreeViewInstanceItem(new FTreeViewInstanceData(InRootPath));
	TreeRootItems.Add(Root);
	ConstructChildrenRecursively(Root);
}

void STreeViewDemo::ConstructChildrenRecursively(FTreeViewInstanceItem TreeItem)
{
	if (TreeItem.IsValid())
	{
		//找到此目录下所有文件
		TArray<FString> FindedFiles;
		FString SearchFile = TreeItem->DiskPath + "/*.*";
		IFileManager::Get().FindFiles(FindedFiles, *SearchFile, true, true);

		for (auto&element : FindedFiles)
		{
			//构建子节点
			FString FullPath = TreeItem->DiskPath + "/" + element;
			FTreeViewInstanceItem Child = FTreeViewInstanceItem(new FTreeViewInstanceData(FullPath, TreeItem));
			TreeItem->Children.Add(Child);
			if (Child->bIsDirectory)
			{
				//目录则递归获取其子节点信息
				ConstructChildrenRecursively(Child);
			}
		}
	}
}

TSharedRef<ITableRow> STreeViewDemo::GenerateTreeRow(FTreeViewInstanceItem TreeItem, const TSharedRef<STableViewBase>& OwnerTable)
{
	check(TreeItem.IsValid());
	//根据TreeItem构建一个Item表现的Widget
	return
		SNew(STableRow<FTreeViewInstanceItem>, OwnerTable)
		[
			SNew(SBox)
			.WidthOverride(200.0f)
			[
				SNew(SHorizontalBox)
				+ SHorizontalBox::Slot()
				.VAlign(VAlign_Center)
				.AutoWidth()
				[
					TreeItem->CreateIcon().ToSharedRef()
				]
				+ SHorizontalBox::Slot()
				.VAlign(VAlign_Center)
				.AutoWidth()
				[
				SNew(STextBlock)
				.Text(FText::FromString(TreeItem->CleanName))
				.Font(FStyleDefaults::GetFontInfo(20))
				]
			]
		];
}

void STreeViewDemo::GetChildrenForTree(FTreeViewInstanceItem TreeItem, TArray< FTreeViewInstanceItem >& OutChildren)
{
	//获取TreeItem的子节点信息
	if (TreeItem.IsValid())
	{
		OutChildren = TreeItem->Children;
	}
}

FTreeViewInstanceData::FTreeViewInstanceData(const FString& InPath)
	:DiskPath(InPath)
{
	CleanName = FPaths::GetBaseFilename(DiskPath);
	bIsDirectory = !FPaths::FileExists(DiskPath);
}

FTreeViewInstanceData::FTreeViewInstanceData(const FString& InPath, TSharedPtr<FTreeViewInstanceData>&InParent)
	:DiskPath(InPath), Parent(InParent)
{
	CleanName = FPaths::GetBaseFilename(DiskPath);
	bIsDirectory = !FPaths::FileExists(DiskPath);
}

TSharedPtr<SWidget> FTreeViewInstanceData::CreateIcon() const
{
	FSlateColor IconColor = FSlateColor::UseForeground();
	const FSlateBrush* Brush = FEditorStyle::GetBrush(bIsDirectory ? "ContentBrowser.AssetTreeFolderOpen" : "ContentBrowser.ColumnViewAssetIcon");
	return SNew(SImage)
		.Image(Brush)
		.ColorAndOpacity(IconColor);
}

  TreeViewWidgetDemo.h

#pragma once

#include "CoreMinimal.h"
#include "UMG/Public/Components/Widget.h"
#include "TreeViewWidgetDemo.generated.h"

UCLASS()
class UTreeViewWidget : public UWidget
{
	GENERATED_BODY()

public:
	UTreeViewWidget(const FObjectInitializer& ObjectInitializer);

	UPROPERTY(EditAnywhere, DisplayName = "Root Directory")
	FString CurrentRootPath;
protected:
	virtual TSharedRef<SWidget> RebuildWidget();
};

  TreeViewWidgetDemo.cpp

#include "TreeViewWidgetDemo.h"
#include "STreeViewDemo.h"

UTreeViewWidget::UTreeViewWidget(const FObjectInitializer& ObjectInitializer)
	: Super(ObjectInitializer)
{
}

TSharedRef<SWidget> UTreeViewWidget::RebuildWidget()
{
	return SNew(STreeViewDemo)
		.RootPath(CurrentRootPath);
}

  3、编译工程，以DevelopmentEditor启动编辑器。
  4、在Content目录创建控件蓝图(命名为TreeViewWidget)， 并布局如下图(右)所示，其中TreeViewWidgetDemo控件是我们定义的UTreeViewWidget类型控件，在控制板中输入关键字可搜索到并拖入布局器内。
在这里插入图片描述在这里插入图片描述
设置属性：选中TreeViewWidgetDemo控件在右侧面板内输入测试用的路径，如上图（左）。
  5、打开关卡蓝图，写入创建并显示蓝图的逻辑，如下图：
在这里插入图片描述
  6、运行游戏查看结果
  附上示例工程，解压即可使用，示例工程使用4.24版引擎。Github链接

wymdhr
关注
  • 12
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
树结构显示软件Treeview
10-06
用于显示进化树的软件，它可以读取NEXUS及PHYLIP生成的进化树格式文件，生成进化树，并输出到打印机。
UE4TreeView注意事项
Gangster的博客
08-12 673
非常详细的UE4TreeView教程 在按照上述教程设置TreeView的时候，到最后发现点击后，子节点依然不会显示，查了很久终于查明白原因。就是在TreeEntry中必须将Canvas删掉。
UE4 TreeView树形结构的简单使用方法。
qq_42496844的博客
10-24 5542
树形结构很多时候都会用到，这次分享一下UMG中TreeView的使用。 废话不多说，先上效果图。 首先说一说TreeView的结构，TreeView的显示依赖于Widget。想用treeview必须要设置这个属性，把这个设置成另一个UI。还要说一点，EntryWidgetClass要求UI必须继承UserObjectListEntry。 这个可以在类设置中添加下。想在TreeView显示...
UE5 Slate中的StreeView的基础创建方法
最新发布
weixin_42318094的博客
02-22 446
UE5 Slate中的StreeView的基础创建方法留做记录。
UE4游戏编程蓝图c++语言教程
06-07
虚幻引擎为您提供了多个编程游戏选项：您可以使用C++，也可以使用虚幻蓝图系统。 C++和蓝图之间的一些区别是不言而喻的：有了C++，您使用通用的基于文本的编程语言编写代码。蓝图更直观，更具体地针对更高级的游戏编程：您通过将表示事件、控制结构和函数调用的图形节点串在一起来编写代码，并通过编辑内对话来定义您的数据和界面，而不必使用精确的语法写出定义。
UE4 C++JSON读取示例.zip
09-03
UE4 C++JSON读取示例.zip
UE4 TreeView学习
sdjfgsaw的博客
08-07 321
Tree View
UE4-（UI）第七十三课Tree View树形结构
热门推荐
Stone的博客
12-06 1万+
一、Tile View需要提供树形结构数据，TreeView 和Tile View 都是继承自List View。 二、创建方法，与ListView创建方法一致，需要TreeEntry控件蓝图实现接口UserObjectListEntry，需要TreeItem基于Object的蓝图类。与Test用来显示UI到显示器中的控件蓝图。 区别：1.在TreeEntry中添加水平盒并放置Text（用于后...
UE4UMG之TreeView
WindRushNight的博客
06-17 2077
1.用来做什么的：属于列表分类里面的树状列表。（类似于UMG控件的层级关系一样的结构）2.使用流程总结：在母UI里面创建treeview控件，然后创建一个新的UMG蓝图，在新UMG里的类设置里找到添加接口的按键，添加User Object List Entry接口，然后再母UI里的treeview里就可在EntryWidgetClass里找到新的UMG了。然后创建一个Object类，在里面存储新UMG的数据，创建对应变量类型（需要有区分层级关系的变量和存储子树Object对象的数组）。在object类里创建
UE UMG补充
qq_52825422的博客
07-26 1657
通过该组件可以在同一个地方显示不同UI。可以通过蓝图改变显示的UI。
UE4蓝图调用C++函数的工程分享
03-11
1. 继承C++类的蓝图类直接调用 2.C++类中的全局函数，任意蓝图都能调用的方式。
TreeView显示效果图
02-19
里面线的部分,缺少了一块东西.
UE4的C++离线文档
01-04
UE4 C++离线API文档是Unreal Engine 4的官方C++ API文档的离线版本。该文档包含了UE4 C++ API的所有类、函数、宏、枚举等内容，并提供了详细的说明和示例代码。 文档内容 UE4 C++离线API文档的内容主要分为以下几部分： 类（Classes）：该部分包含了UE4 C++ API中所有类的信息，包括类名、继承关系、成员变量、成员函数等。 函数（Functions）：该部分包含了UE4 C++ API中所有函数的信息，包括函数名、参数、返回值、说明等。 宏（Macros）：该部分包含了UE4 C++ API中所有宏的信息，包括宏名、参数、说明等。 枚举（Enumerations）：该部分包含了UE4 C++ API中所有枚举的信息，包括枚举名、枚举值、说明等。 文档使用 UE4 C++离线API文档可以通过以下方式使用： 使用CHM文件查看：该文档提供了CHM格式的文件，可以使用Windows自带的CHM查看器或其他第三方CHM查看器来查看。 使用HTML文件查看：该文档还提供了HTML格式的文件，可以使用Web浏览器来查看。 使用API查询工具
UE4 C++教程 虚幻四C++教程
06-10
UE4 C++教程 虚幻四C++教程
【UE4】FString TCHAR_TO_UTF8宏的一些坑
wymdhr的博客
03-24 6999
TCHAR_TO_UTF8可以将FString转为UTF8格式的字符串，例如用char*接收 FString String; char* UTF8String = TCHAR_TO_UTF8(*String); 这里需要注意的是TCHAR_TO_UTF8宏仅仅是构造了一个临时对象，此对象会在函数作用域后就被释放，UTF8String 也将变为野指针，一般情况下转换完成后会直接使用UTF8Stri...
【UE4】进程间通过Windows消息通信
wymdhr的博客
02-19 2824
  记录一下探究成果。我做的是基于UE项目的独立模块与UE项目编辑器窗口的通信，简化一下，这里用Windows控制台程序向UE4程序发消息的例子来说明流程，原理上是一样的。代码就不一一贴上来了，附上源码链接（点这里）。要注意发送程序关注的进程名要和接收程序一致，否则无法实现通信。 发送程序   发送程序需要找到需要发消息的窗口句柄，然后打包信息利用Windows的SendMessage()函数发送...
【UE4】如何根据游戏进程信息获取主窗口
wymdhr的博客
04-20 1290
  对于UE来讲，根据窗口句柄（以下函数）来获取其是否有父窗口并不能用来获取进程的主窗口。 HWND parent = GetParent(h);   每一个创建出来的窗口（SWindow）都是根窗口，因此想要获得进程主窗口，只能通过提前给创建的主窗口打标签或者根据已知的主窗口名称来筛选。 ...
UE4 截图并保存（C++实现）
06-11
你可以使用以下代码实现在UE4中截取屏幕并保存为图片： ```cpp UTexture2D* UScreenshotFunctionLibrary::TakeScreenshot(UObject* WorldContextObject, int32 Width, int32 Height) { // Get the player controller APlayerController* PlayerController = UGameplayStatics::GetPlayerController(WorldContextObject, 0); if (!PlayerController) { return nullptr; } // Take the screenshot FViewport* Viewport = GEngine->GameViewport->Viewport; TArray<FColor> Bitmap; bool bScreenshotSuccessful = Viewport->ReadPixels(Bitmap, FReadSurfaceDataFlags(), FIntRect(0, 0, Width, Height)); if (!bScreenshotSuccessful) { return nullptr; } // Create the texture UTexture2D* Texture = UTexture2D::CreateTransient(Width, Height, PF_B8G8R8A8); Texture->AddToRoot(); // Make sure the texture isn't garbage collected Texture->UpdateResource(); // Copy the bitmap data to the texture uint8* MipData = static_cast<uint8*>(Texture->PlatformData->Mips[0].BulkData.Lock(LOCK_READ_WRITE)); for (int32 Y = 0; Y < Height; Y++) { for (int32 X = 0; X < Width; X++) { int32 Index = Y * Width + X; MipData[Index * 4 + 0] = Bitmap[Index].B; MipData[Index * 4 + 1] = Bitmap[Index].G; MipData[Index * 4 + 2] = Bitmap[Index].R; MipData[Index * 4 + 3] = Bitmap[Index].A; } } Texture->PlatformData->Mips[0].BulkData.Unlock(); // Save the texture to a file FString Filename = FPaths::ProjectDir() / TEXT("Screenshots") / FDateTime::Now().ToString(TEXT("yyyy-MM-dd_HH-mm-ss")) + TEXT(".png"); FFileHelper::SaveObjectAsPNG(Texture, *Filename); return Texture; } ``` 此代码通过读取屏幕像素并将其复制到一个临时纹理中，最后将纹理保存为 PNG 文件。你可以调用此函数来截取当前屏幕并保存为文件。 注意：你需要在项目设置中启用 "With Editor" 选项，以便在运行时允许截屏。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值