Version: 2021.2
IMGUI 事件
控件参考

控件

控件是图形用户界面的元素,例如按钮、标签或复选框。它包括控件的视觉效果,以及对其进行操作及交互的脚本逻辑。

在 UI 工具包中,控件类似于预制件,将视觉元素和脚本结合到一个可在 UI 面板中使用的模板中。

控件可以由单个视觉元素或多个视觉元素的组合组成。

开关控件
开关控件

例如,上面显示的 Toggle 控件包含三个元素:

  • 文本标签
  • 一个框图像
  • 一个复选标记的图像

Toggle 控件的实现定义了该控件的行为。它具有代表切换状态的内部值:true 或 false。当值发生变化时,此逻辑会交替显示复选标记图像。

向 UI 添加控件

要在 UI 中使用控件,您需要将其添加到 UI 层级结构中,称为视觉树。您可以通过脚本、UXML 或在 UI Builder 中添加控件。

下面的代码片段展示了如何将 Button 控件添加到现有的视觉树中。

var newButton = new Button("Click me!");
rootVisualElement.Add(newButton);

向 UI 层级结构添加控件时,布局引擎会自动处理大小和定位。有关自动布局的更多信息,请参阅布局引擎

您还可以手动覆盖视觉元素的大小和位置。要了解有关手动控制位置的更多信息,请参阅视觉树页面。

UI 工具包中的所有视觉元素都使用样式来定义其属性。您可以通过三种方式修改样式属性:

  • 创建 USS 样式表
  • 在 UI Builder 中应用适当的属性。
  • 通过代码修改元素的样式属性。

与控件交互

控件是交互式的,它代表了一个可以更改的值。例如,FloatField 代表一个浮点值。您可以使用代码对更改做出反应,例如:

  • 注册一个回调。
  • 直接读取控制值。
  • 数据绑定。

控件值的属性

如果控件表示可修改的值,则它包含一个 value 属性。脚本可以使用 value 属性直接访问控件的值。下面的代码片段创建了一个 Toggle 控件和一个 Button 控件。当您单击按钮时,该开关的值会翻转。

// 创建一个开关并注册回调
m_MyToggle = new Toggle("Test Toggle") { name = "My Toggle" };
rootVisualElement.Add(m_MyToggle);

// 创建切换开关值的按钮
Button button01 = new Button() { text = "Toggle" };
button01.clicked += () =>
{
    m_MyToggle.value = !m_MyToggle.value;
};
rootVisualElement.Add(button01);

要了解有关特定控件的属性的更多信息,请参阅 UI 工具包控件参考

注册一个回调。

所有具有 value 属性的内置控件都会在值发生变化时发送一个事件。代码可以注册一个回调来接收这个事件。下面的代码片段展示了如何创建一个 Toggle 控件并注册一个回调:

// 创建一个开关并注册回调
m_MyToggle = new Toggle("Test Toggle") { name = "My Toggle" };
m_MyToggle.RegisterValueChangedCallback((evt) => { Debug.Log("Change Event received"); });
rootVisualElement.Add(m_MyToggle);

要了解有关回调和事件的更多信息,请参阅事件处理

数据绑定

控件可以直接绑定到对象或序列化属性。例如,一个FloatField 控件可绑定到属于某个 MonoBehaviour 的公共浮点变量。当控件绑定到该属性时,它会自动显示该属性的值。当用户修改该控件时,属性值会更新。

同样,当属性值通过代码更改时,UI 会显示更新后的值。这种双向连接在创建自定义 Inspector 时很有用。

要了解有关数据绑定的更多信息,请参阅绑定 页面。

并非所有控件都是可绑定的。要查看所有内置控件的列表以及它们是否支持绑定,请参阅 UI 工具包控件参考

创建自定义控件

UI 工具包允许您创建自定义控件。这使得创建复杂控件或为用户界面元素实现自定义逻辑成为可能。 控件直接派生自 VisualElementVisualElement 的子类,例如 TextElement。它们还可能添加实现控件的行为的操控器。例如,Button 控件添加了一个Clickable 操控器。

内置控件

Unity 包含大量标准控件,例如标签、文本字段和开关。某些控件仅在编辑器中可用。 有关 UI 工具包的内置控件的完整列表,请参阅 UI 工具包控件参考

IMGUI 事件
控件参考