Button

使用 Button 元素可在__ UI__（即用户界面，User Interface）让用户能够与您的应用程序进行交互。Unity 目前支持三种 UI 系统。更多信息
See in Glossary 中创建可单击的按钮。例如，当用户单击或点击 Button 元素时，它会触发操作或事件，例如打开新窗口、提交表单或播放音效。

创建 Button。

您可以使用 UI Builder、UXML 或 C# 创建 Button。以下 C# 示例可创建一个带有标签的 Button：

var button = new Button(() => { Debug.Log("Button clicked"); }) { text = "Click me" };

将图标添加到 Button

您可以通过合并图标（例如项目中存在的纹理、渲染纹理、精灵或矢量图像资源）来增强 Button 的视觉吸引力。有关如何引用图像资源的信息，请参阅资源。

要使用 UI Builder 为 Button 添加图标：

• 在 Button 的 Inspector 选项卡中，从 Icon Image 下拉列表选择所需的图标。
• 或者，将图标从 Assets 窗口拖动到按钮的 Inspector 选项卡中的 Icon Image 字段。

要使用 UXML 为按钮添加图标，请将图像源提供给 icon-image 属性：

<ui:Button name="Button" text="Button text" icon-image="/path/to/image-file.png" />

要使用 C# 为 Button 添加图标，请将图像源分配给 iconImage 属性：

Button myButton = new Button();
var buttonIconImage = Resources.Load<Texture2D>("image-file");

myButton.text = "Button text";
myButton.iconImage = buttonIconImage;

更改 Button 图标位置

将图标添加到 Button 时，它会向 Button 添加两个只读子元素：

• 用于定义图标图像的图像元素。
• 用于定义按钮文本的 TextElement。

无法编辑子元素，但可以使用 Button 元素的 USS flex-direction 属性更改其布局。默认情况下，图标会添加到按钮文本的左侧。

要重新定位按钮图标，请使用以下内容调整 Button 的 flex-direction：

• 要将图标移动到按钮文本的右侧，请将其设置为 row-reverse。
• 要将图标移动到按钮文本的上方，请将其设置为 column。
• 要将图标放在按钮文本的下方，请将其设置为 column-reverse。

使用 Button 的子元素

Button 元素允许使用 text、iconImage 属性和 background-image 样式属性为用户提供其他信息。与任何视觉元素一样，如果要对这些元素的外观和行为进行更精细的控制，还可以在 Button 的层级视图中添加子元素，例如标签或图像，从而为用户提供其他信息。

通常，在以下情况下使用子元素：

• 自定义：使用子元素可以单独自定义每个元素的外观和行为。例如，您可能希望对标签文本使用自定义字体或颜色，或向图像添加特定动画。将图像元素添加到 Button 时，可以直接从场景中添加元素。此外，图像元素还支持缩放模式和重复模式。
• 动态内容：如果标签或图像的内容是动态的，则使用子元素可以单独更新每个元素的内容，而不会影响按钮的其他属性。
• 交互：如果要为按钮内的特定元素添加交互性，例如允许用户只能通过单击标签（不考虑单击按钮的其他元素）来触发操作，可使用子元素来实现此目的。

将属性用于以下目的：

• 简单设计：如果按钮的设计很简洁，不需要自定义或动态内容，建议使用属性。
• 性能：如果在 UI 中有许多按钮，针对每个按钮使用子元素可能会对性能产生负面影响。在这种情况下，使用属性来设置按钮的外观会更有效。
• 一致性：如果要在整个 UI 中保持一致，使用属性可以确保所有按钮具有一致的外观和行为。

示例

以下 UXML 示例可创建一个 Button：

<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <Button text="UXML Button" name="the-uxml-button" />
</UXML>

以下 C# 示例说明了 Button 的一些可自定义功能：

/// <sample>
// Action to perform when button is pressed.
// Toggles the text on all buttons in 'container'.
Action action = () =>
{
    container.Query<Button>().ForEach((button) =>
    {
        button.text = button.text.EndsWith("Button") ? "Button (Clicked)" : "Button";
    });
};

// Get a reference to the Button from UXML and assign it its action.
var uxmlButton = container.Q<Button>("the-uxml-button");
uxmlButton.RegisterCallback<MouseUpEvent>((evt) => action());

// Create a new Button with an action and give it a style class.
var csharpButton = new Button(action) { text = "C# Button" };
csharpButton.AddToClassList("some-styled-button");
container.Add(csharpButton);
/// </sample>

要在 Unity 中实时试用此示例，请转到窗口 (Window) > UI 工具包 (UI Toolkit) > 示例 (Samples)。

C# 基类和命名空间

C# 类：Button
命名空间：UnityEngine.UIElements
基类：TextElement

成员 UXML 属性

此元素具有以下成员属性：

继承 UXML 属性

此元素从其基类继承以下属性：

此元素还从 VisualElement 继承以下属性：

USS 类

下表列出了所有 C# 公共属性名称及其相关的 USS 选择器。

还可以使用检视器中的匹配选择器 (Matching Selectors) 部分或 UI 工具包调试器来查看哪些 USS 选择器在其层级视图的每个级别上影响 VisualElement 的组件。

其他资源

• Image
• TextElement
• ToggleButtonGroup