按钮

使用 Button 元素在 UI 中创建可点击的按钮。例如，当用户单击或点击 Button 元素时，它会触发作或事件，例如打开新窗口、提交表单或播放音效。

创建按钮

你可以使用 UI 生成器、UXML 或 C# 创建 Button。以下 C# 示例创建带有标签的 Button：

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

向按钮添加图标

您可以通过合并图标（例如纹理、渲染纹理（Render Texture）一种特殊类型的纹理，在运行时创建和更新。要使用它们，请先创建一个新的渲染纹理，并指定要渲染到其中的摄像机之一。然后，你可以在材质中使用渲染纹理，就像使用常规纹理一样。更多信息
请参阅术语表,精灵A 2D 图形对象。如果您习惯在 3D 中工作，精灵本质上只是标准纹理，但有一些特殊技术可以组合和管理精灵纹理，以提高开发过程中的效率和便利性。更多信息
请参阅术语表或项目中存在的矢量图像资产。有关如何引用图像资产的信息，请参阅资产可在游戏或项目中使用的任何媒体或数据。资产可能来自在 Unity 外部创建的文件，例如 3D 模型、音频文件或图像。您还可以在 Unity 中创建某些资产类型，例如 Animator 控制器、混音器或渲染纹理。更多信息
请参阅术语表.

要使用 UI Builder 为按钮添加图标：

• 从 Button 的检查器一个 Unity 窗口，显示有关当前选定游戏对象、资产或项目设置的信息，允许您检查和编辑值。更多信息
  请参阅术语表选项卡，从图标图像下拉列表中选择所需的图标。
• 或者，将图标从“资源”窗口拖动到“按钮”的“检查器”选项卡中的“图标图像”字段。

要使用 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 添加两个只读子元素：

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

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

要重新定位按钮图标，请调整按钮的flex-direction替换为以下内容：

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

使用按钮的子元素

Button 元素允许您通过text,iconImage属性，以及background-imagestyle 属性。与任何视觉元素实例化或派生自 C# 的可视化树的节点VisualElement类。您可以设置外观样式、定义行为并将其作为 UI 的一部分显示在屏幕上。更多信息
请参阅术语表，如果您想更精细地控制这些元素的外观和行为，您还可以在 Button 的层次结构中添加子元素，例如 Label 或 Image，以便向用户提供其他信息。

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

• 定制：使用子元素可以让您分别自定义每个单独元素的外观和行为。例如，您可能想要为标签文本使用自定义字体或颜色，或者向图像添加特定的动画。将 Image 元素添加到 Button 时，可以从场景场景包含游戏的环境和菜单。将每个唯一的场景文件视为一个独特的关卡。在每个场景中，你放置你的环境、障碍物和装饰品，基本上是将你的游戏设计和构建成碎片。更多信息
  请参阅术语表径直。此外，Image 元素还支持缩放模式和重复模式。
• 动态内容：如果标签或图像的内容是动态的，则使用子元素可以单独更新每个元素的内容，而不会影响按钮的其他属性。
• 交互：如果您想为按钮内的特定元素添加交互性，例如允许用户仅单击标签（忽略单击按钮的其他元素）来触发作，则使用子元素可以实现这一点。

将属性用于以下目的：

• 简单的设计：如果按钮的设计简单且不需要自定义或动态内容，则建议使用属性。
• 性能：如果界面中有许多按钮，则为每个按钮使用子元素可能会对性能产生负面影响。在这种情况下，使用属性来设置按钮的外观会更有效。
• 一致性：如果要保持整个 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 工具包>示例。

C# 基类和命名空间

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

成员 UXML 属性

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

继承的UXML属性

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

此元素还继承了以下属性VisualElement:

USS 级

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

您还可以使用 Inspector 或 UI Toolkit Debugger 中的 Matching Selectors 部分来查看哪些 USS 选择器会影响VisualElement在其层次结构的各个层面。

其他资源

• 图像
• 文本元素
• 切换按钮组