面板表示 UI(用户界面) 允许用户与您的应用程序交互。Unity 目前支持三种 UI 系统。 更多信息
参见 词汇表 层次结构中的一个可见实例。它处理 可视化树由轻量级节点组成的对象图,其中包含窗口或面板中的所有元素。它定义了您使用 UI 工具包构建的每个 UI。
参见 词汇表 层次结构内的元素行为事件分发。它保存对层次结构根部的 可视化元素可视化树的节点,它实例化或派生自 C# VisualElement
类。您可以设置外观、定义行为并在屏幕上显示它作为 UI 的一部分。 更多信息
参见 词汇表 的引用。对于运行时 UI,它类似于 UGUI 中的画布。
您必须将一个可视化元素的实例附加到面板才能使其渲染或接收事件。
当可视化元素与面板之间的关系发生变化时,面板事件会在可视化元素上触发。例如,当您将可视化元素添加到面板(AttachToPanelEvent
)或从面板中移除它(DetachFromPanelEvent
)时。
面板事件只发送给可视化元素及其在层次结构中的后代,这些元素在面板发生变化时会直接受到影响。当后代可视化元素附加或分离到面板时,父元素不会接收事件。
例如,在下面的 UXML 代码中,当您将 parent
可视化元素添加到已附加到面板的层次结构时,parent
、child
和 grandchild
都将接收相同的事件。如果您从相同的 UXML 层次结构中移除 parent
,所有可视化元素都将接收 DetachFromPanel
事件。
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
<ui:VisualElement name="parent">
<ui:VisualElement name="child">
<ui:VisualElement name="grandchild" />
</ui:VisualElement>
</ui:VisualElement>
</ui:UXML>
所有面板事件的基类是 PanelChangedEventBase。
事件 | 描述 | 向下传递 | 向上冒泡 | 可取消 |
---|---|---|---|---|
AttachToPanelEvent | 在元素(或其父元素之一)附加到面板后立即发送。 | |||
DetachFromPanelEvent | 在元素(或其父元素之一)从面板中分离之前发送。 |
originPanel
: originPanel
包含特定于 DetachFromPanelEvent
的数据。它包含可视化元素在面板更改期间从中分离的源面板。
destinationPanel
: destinationPanel
包含特定于 AttachFromPanelEvent
的数据。它提供可视化元素现在附加到的面板。
以下列表提供事件系列中每个事件的名称、描述和目标。
当可视化元素附加到面板时,AttachToPanelEvent
会触发。当您将可视化元素添加到已附加到面板的层次结构时,也会发生这种情况。
target
: 附加到面板的可视化元素。
当您从面板中移除可视化元素之前,DetachFromPanelEvent
会触发。当您从已附加到面板的层次结构中移除可视化元素时,也会发生这种情况。
target
: 从面板分离的可视化元素。
以下示例创建一个带有按钮的编辑器窗口,该按钮将向窗口添加更多标签。单击标签将再次将其移除。
此示例实现了一个自定义标签类,该类在 VisualElement 实例附加或分离到面板时向控制台打印一条消息。它突出显示了 AttachToPanelEvent 和 DetachFromPanelEvent 事件的行为以及如何使用 originPanel 和 destinationPanel 属性。
要查看实际示例,请执行以下操作
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
public class PanelEventsTestWindow : EditorWindow
{
[MenuItem("Window/UI Toolkit/Panel Events Test Window")]
public static void ShowExample()
{
PanelEventsTestWindow wnd = GetWindow<PanelEventsTestWindow>();
wnd.titleContent = new GUIContent("Panel Events Test Window");
}
public void CreateGUI()
{
// Set a name for the panel
rootVisualElement.panel.visualTree.name = "Our Window Root Visual Element";
// Add a button which will add new instances of our custom labels to the window
rootVisualElement.Add(new Button(() => rootVisualElement.Add(new CustomLabel())) { text = "Add New Label" });
}
}
/// <summary>
/// Custom label class which prints out a console message when it is attached or detached.
/// </summary>
public class CustomLabel : Label
{
private static int m_InstanceCounter = 0;
private int m_LabelNumber;
public CustomLabel() : base()
{
m_LabelNumber = ++m_InstanceCounter;
text = $"Label #{m_LabelNumber} - click me to detach";
RegisterCallback<AttachToPanelEvent>(evt =>
{
Debug.Log($"I am label {m_LabelNumber} and I " +
$"just got attached to panel '{evt.destinationPanel.visualTree.name}'");
});
RegisterCallback<DetachFromPanelEvent>(evt =>
{
Debug.Log($"I am label {m_LabelNumber} and I " +
$"just got detached from panel '{evt.originPanel.visualTree.name}'");
});
// Register a pointer down callback that removes this element from the hierarchy
RegisterCallback<PointerDownEvent>(evt => this.RemoveFromHierarchy());
}
}