跳转至

在 UMG 中显示页面

MarkupUIWidget 是承载 Markup UI 页面的 UMG 控件,可放入 Widget Blueprint,并与其他 UMG 控件组合。创建界面并将其添加到 Viewport 的完整步骤见第一个游戏界面。

UMarkupUIWidget

UMarkupUIWidget 继承自 UWidget,用于在 UMG 界面中显示 Markup UI 页面。

  • 类型:类
  • 父类:UWidget
  • 头文件:UMG/MarkupUIWidget.h
  • 包含方式:#include "UMG/MarkupUIWidget.h"
class UMarkupUIWidget final : public UWidget

继承关系:UObject → UVisual → UWidget → UMarkupUIWidget。

属性

可在 Widget Blueprint 的 Designer 中选中 MarkupUI Widget,在 Details → MarkupUI 中配置以下属性:

属性 类型 说明 默认值
Document UHtmlDocument* 控件使用的 HTML 文档资产;蓝图中可读取 空
Desired Size FVector2D 控件向父容器请求的期望尺寸;蓝图中可读取和设置 640 × 480

Document 选择导入后的 HTML 文档资产。控件创建并同步属性时会打开该文档;未选择文档时,控件不会自动显示页面。

Markup UI Widget 的 Document 和 Desired Size 设置

事件

事件 类型 说明
On Document Ready FMarkupUIDocumentReady 页面就绪、元素可以访问时触发;可在蓝图中绑定

等待页面就绪

必须等待 On Document Ready 事件触发后,才能安全访问页面元素;在此之前,页面元素不可用。

函数

以下是 UMarkupUIWidget 自身的公开函数。

函数 说明
OpenDocument(UHtmlDocument* NewDocument) 打开 HTML 文档资产
OpenDocument(const FString& Html, const FString& NewDocumentUri = FString()) 打开 HTML 字符串,可指定文档地址
CloseDocument() 关闭当前页面
SetDataContext(UObject* DataContext, EMarkupUIReferenceMode ReferenceMode = EMarkupUIReferenceMode::Weak) 设置默认数据上下文,默认使用弱引用
SetDataContext(const TSharedPtr<MarkupUI::Binding::IObject>& DataContext) 使用接口对象设置默认数据上下文
ResetDataContext() 清除默认数据上下文
SetNamedDataContext(const FString& Name, UObject* DataContext, EMarkupUIReferenceMode ReferenceMode = EMarkupUIReferenceMode::Weak) 设置命名数据上下文,默认使用弱引用
SetNamedDataContext(const FString& Name, const TSharedPtr<MarkupUI::Binding::IObject>& DataContext) 使用接口对象设置命名数据上下文
ResetNamedDataContext(const FString& Name) 清除指定名称的数据上下文
GetRootElement() 获取页面根元素
CreateElement(const FString& Tag) 根据标签名创建元素
IsDocumentReady() 检查页面是否就绪

以下函数可通过 MarkupUI Widget 引用调用。

函数 说明
Set Data Context 设置默认数据上下文,默认使用弱引用
Reset Data Context 清除默认数据上下文
Set Named Data Context 设置命名数据上下文,默认使用弱引用
Reset Named Data Context 清除指定名称的数据上下文
Get Root Element 获取页面根元素
Create Element 根据标签名创建元素
Is Document Ready 检查页面是否就绪

Open Document、Open Document (Html) 和 Close Document 是作用于该控件的独立异步蓝图节点,下方“运行时打开和关闭页面”介绍了它们的用法。

以上列出控件自身定义的属性、事件和函数;继承成员仍可按 Unreal Engine 的方式使用。

控件尺寸

Desired Size 是控件向父容器提供的期望尺寸,不保证最终尺寸。实际显示区域由父容器、布局规则及可用空间决定。

  • 在 Canvas Panel 中,可通过锚点和偏移设置控件占用的区域。
  • 在其他 UMG 容器中,可根据容器的填充、对齐和尺寸规则调整控件。
  • 页面中的百分比和布局相对于控件的页面视口计算;改变控件尺寸后,应检查页面内容是否仍完整显示。

控件尺寸、DPI 和页面缩放的关系见 DPI 与缩放。

运行时打开和关闭页面

需要在游戏过程中切换页面时,可使用蓝图节点操作已有的 MarkupUI Widget:

节点 作用
Open Document 打开指定的 HTML 文档资产
Open Document (Html) 打开 HTML 字符串,可通过 Document Uri 提供资源路径的基址
Close Document 关闭当前页面

例如,在 Widget Blueprint 的 Graph 中取得 MarkupUI Widget 的引用,调用 Open Document 并传入目标文档资产。处理完毕后,可以调用 Close Document。这些节点提供 Completed 和 Failed 引脚,用于处理操作结果。

蓝图中使用 Open Document 节点打开 HTML 文档资产

文档打开与页面就绪

Open Document 的 Completed 表示打开操作已被接受,不表示页面元素已经可供访问。需要访问页面元素时,使用控件的 On Document Ready 事件,或通过 Is Document Ready 检查状态。

HTML 文档资产的资源路径根据资产在资产目录中的位置解析;根路径 / 从全局配置的资产目录开始查找。详细规则见工作目录。

切换与重新加载

在同一个 MarkupUI Widget 上调用 Open Document 并传入另一个文档资产,即可切换页面;传入当前文档资产则会重新加载页面。对于 HTML 字符串,使用当前内容和需要的 Document Uri 再次调用 Open Document (Html) 即可重新加载。

打开新页面时,控件会先关闭当前页面,无需先调用 Close Document。切换或重新加载会创建新页面;需要保留的数据应保存在数据上下文或其他游戏对象中,并在新页面就绪后重新获取需要操作的元素。

修改设计时目录中的文件后,先同步资产并保存,再重新加载页面。同步资产不会自动重新打开正在显示的页面。

Document Uri 地址格式

使用 Open Document (Html) 打开 HTML 字符串时,可通过 Document Uri 指定该字符串在资产目录中的虚拟 HTML 文档位置。加载 HTML 引用的 CSS、图片等资源时,相对路径以该文档所在目录为起点解析。地址使用以下格式:

markupui-asset:///相对于资产目录的页面路径

例如,Document Uri 设置为 markupui-asset:///pages/index.html,页面中的相对路径以 pages/ 为起点:

<link rel="stylesheet" href="../styles/main.css">

该引用指向资产目录中的 styles/main.css。虚拟文档位置仅用于确定资源路径的解析基址,无需在该位置实际创建 HTML 文档资产。

Document Uri 可以留空;此时使用默认的内存地址 memory:///widget.html,不会以资产目录作为相对路径的基址。需要引用资产目录中的资产时,应设置 markupui-asset:/// 地址。

数据与交互

每个控件承载自己的页面实例。页面需要游戏数据时,可在控件上设置默认或命名数据上下文;页面中的事件可以绑定到上下文提供的命令。具体操作见属性绑定和命令绑定。

页面显示后,还需要根据界面用途配置 Unreal Engine 的输入模式、鼠标光标和焦点。控件本身是否可见与是否能够接收输入是不同的设置;交互行为应在运行时验证。

常见问题

现象 检查项
控件区域为空 Document 是否已设置,或运行时打开节点是否执行并连接了有效文档资产
页面显示不完整 父容器分配的尺寸、锚点和偏移是否符合预期
页面没有样式或图片 文档及引用的资产是否位于资产目录内,路径和命名规则是否正确
输入框无法使用 控件是否获得焦点,游戏的输入模式和光标设置是否允许界面交互
打开后无法立即访问元素 等待 On Document Ready,并检查打开操作是否失败

可在编辑器预览中检查文档资产和资源诊断。