控件

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

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

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

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

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

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

向 UI 添加控件

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

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

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

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

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

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

• Creating a USS style sheets.
• 在 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 工具包允许您创建自定义控件。这使得创建复杂控件或为用户界面元素实现自定义逻辑成为可能。 控件直接派生自 VisualElement 或 VisualElement 的子类，例如 TextElement。它们还可能添加实现控件的行为的操控器。例如，Button 控件添加了一个Clickable 操控器。

内置控件

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