UE4中多个UI界面切换显示实现

想法来源：在虚幻（UE4）中针对同一个关卡一般用一个 主界面就可实现用户的交互，如果在同一关卡中需要多个界面进行切换时就需要考虑多个界面的显示与隐藏切换。

下文详述实现方法：  

 

一、实现功能：如下图所示，程序启动后进入登录页面，点击登录按钮，进入程序主页面，点击按钮4，进入分系统菜单（包含返回和主页按钮）。点击“返回”或“主页”按钮后程序返回到主页面。

登录页面

程序主页面

分系统菜单页

二、用到的关键技术：

（1）利用create widget  class 函数创建页面（UI），

（2）调用AddToViewPort函数将其添加显示到屏幕上。

（3）利用Remove from Parent函数将添加到屏幕上的页面移除。

三、实现步骤：

（1）新建一个空白的虚幻工程。

（2）在内容浏览器（Content Browser）中新建 一个基于Actor的蓝图类（BluePrints），并将其拖动到主关卡中。

（3） 在内容浏览器中新建几个控件蓝图（WIdgets）：登录页面控件蓝图、主页面控件蓝图、分系统菜单页控件蓝图。并在各控件蓝图上添加相应按钮。

创建控件蓝图

（4）打开第二步创建的蓝图类并编辑。利用create widget  class 函数依次创建各UI页面，定义一个UserWidgets引用类型的的变量_TargetWidget，并将创建个UI页面生成的 如图返回值提升为变量（_TargetStartUp/_TargetNonDestructiveTesting/等），如图所示。

创建各UI页面，并提升变量，设置_TargetWidget为登录页面变量

（5）在第二步创建的蓝图类中新增函数 ShowWidgets（），增加一个接口，用于待显示页面的索引，在函数中首先移除显示在屏幕上的图像，Switch语句用于判断显示那个图像，然后用AddToViewPort函数添加当前待显示页面，如图

 

ShowWidget函数

（6）在其他控件蓝图中调用Show函数并传入要显示的UI索引即可。

调用ShowWIdget函数