UI Builder 界面概述

要打开__ UI__（即用户界面，User Interface）让用户能够与您的应用程序进行交互。Unity 目前支持三种 UI 系统。更多信息
See in Glossary Builder 窗口：

• 选择窗口 (Window) > UI 工具包 (UI Toolkit) > UI Builder。这将打开先前已使用 UIBuilder 加载的 UXML 文档。
• 在项目 (Project) 窗口中，双击某个 UXML 文件。

下图显示了 UI Builder 窗口的示例：

打开并保存 UI 文档 (UXML)

要在 UI Builder 中打开 UI 文档，请执行以下操作：

• 使用 UI Builder 视口 (Viewport) 面板工具栏中的文件 (File) 菜单，然后选择打开 (Open)…。
• 在库 (Library) 面板的项目 (Project) 选项卡中，右键单击文档并选择在 UI Builder 中打开 (Open in UI Builder)。

要在默认文本编辑器或 IDE 中打开 UI 文档 (UXML)：

• 使用 inlineStyle 文件图标。
  1. 转到项目 (Project) 窗口 > 资源 (Assets)。
  2. 单击 UXML 文件图标中间的箭头。
  3. 双击 inlineStyle 文件图标。
• 使用 Open with IDE 按钮。
  1. 在 UI Builder 中，转到库 (Library) > 项目 (Project) 选项卡。
  2. 打开 Assets 文件夹。
  3. 右键单击 UI 文档 (UXML)，然后选择使用 IDE 打开 (Open with IDE)。
• 使用 UXML 预览面板。
  1. 在 UI Builder 中，确保当前已加载 UI 文档 (UXML)。
  2. 转到 UXML 预览 (UXML Preview) 面板。
  3. 选择 UXML 预览 (UXML Preview) 面板右上角的图标。

  

当前打开的活动的 UI 文档 (UXML) 资源名称在层级视图面板中显示为根树项目，在视口内的画布标题中显示，并在视口底部的 UXML 预览面板中显示。名称旁边的星号 (*) 表示未保存的更改。

要保存 UI 文档 (UXML)：

• 使用 UI Builder 的视口 (Viewport) 面板工具栏中的文件 (File) > 保存 (Save) 菜单。
• 使用 Ctrl/CMD + S。它还会提示您在编辑器中保存场景。

注意：Unity 项目的全局保存功能不会保存 UI Builder 中打开的活动 UI 文档 (UXML)。

样式表

UI 工具包中的样式表 (StyleSheets) 面板和 USS 选择器 (USS Selectors) 面板用于在众多元素和 UI 文档 (UXML) 之间共享和应用样式。

在样式表面板 中可以：

• 在当前 UI 文档 (UXML) 中添加、重新排序或删除样式表 (USS)。
• 在样式表 (StyleSheets) 面板中创建、重新排序、复制或删除 USS 选择器，从而在不同元素之间共享样式。

层级视图

层级视图面板 包含表示当前文档的元素层级结构的树视图。这是在 UI 文档 (UXML) 的 UXML 文本表示中看到的层级视图的超集。除了直接从 UXML 创建的元素之外，层级视图面板还包含仅在 UI 运行时动态创建的元素。例如，层级视图面板包含模板实例（当前文档中实例化的不同文档）的一部分元素，而 UXML 将只有一个 <Instance> 标签。

您可以使用层级视图面板执行以下操作：

• 选择要检查或编辑的元素。
• 对元素进行剪切、复制、删除或重新排序。
• 将实例化模板文档作为子文档打开以便进行就地（在上下文中）编辑。
• 同时检查许多元素的样式类列表、名称属性和本地附加的样式表。

元素根据其 name 属性显示在树中。如果未设置元素的 name 属性，则会根据其 C# 类型显示。可以双击某个元素来快速重命名。

单击层级视图 (Hierarchy) 面板标题右上角的 ⋮ 图标以访问显示选项的菜单。

• 选择类型 (Type) 可强制层级视图 (Hierarchy) 显示每个元素的 C# 类型（无论元素是否有名称）。
• 选择类列表 (Class List) 可在每个元素的层级视图 (Hierarchy) 条目旁边显示其样式类列表。
• 选择附加样式表 (Attached StyleSheets) 可在元素旁边显示任何本地附加的样式表。

库

库 (Library) 面板 类似于 Unity 编辑器中的项目 (Project) 窗口。它列出了可用的 UI 元素。

• 标准 (Standard) 选项卡列出了 Unity 提供的标准内置元素。这些元素包括适用于所有受支持的 Unity 编辑器主题和运行时主题的标准样式。

您可以使用库 (Library) 窗口右上角的 ⋮ 图标并选择树视图 (Tree View) 在瓦片和树视图之间更改此视图模式。

• 项目 (Project) 选项卡列出了项目中自定义的 .uxml 资源。它还列出继承自 VisualElement 的所有自定义 C# 元素。要预览库的项目选项卡中的任何元素，请将鼠标悬停在该元素上。预览将显示在库 (Library) 面板的右侧。

要实例化元素，请执行以下操作之一：

• 将其拖入层级视图 (Hierarchy) 面板。
• 将元素拖到视口 (Viewport) 中的画布 (Canvas) 上。
• 双击该元素。这会将该元素添加为当前选定元素的同级。如果未选择任何内容，则会将该元素添加到 UI 文档 (UXML) 的根目录。

您可以在层级视图 (Hierarchy) 窗口或画布 (Canvas) 中选择元素。在层级视图中，按住 Ctrl(macOS:Cmd) 可选择其他元素。

视口

视口 (Viewport) 面板 在浮动的可调整编辑时间画布 (Canvas) 上显示 UI 文档 (UXML) 的输出。工具栏包含特定于 UI Builder 的命令、视口 (Viewport) 设置、主题 (Theme) 选择器和预览 (Preview) 按钮的菜单。您可以在 ⋮ 菜单下的视口 (Viewport) 右上角找到其他 UI Builder 设置，包括 Unity 的项目设置 (Project Settings)中 UI Builder 的相关设置的快捷方式。

在视口中导航

平移和缩放可在视口 (Viewport) 中导航。UI Builder 会保存每个 UI 文档 (UXML) 的当前平移和缩放状态，而且在 UI Builder 窗口重新加载、域重新加载或关闭并重新打开同一 UI 文档 (UXML) 后，这些状态会相应恢复。

创建和打开新文档时，UI Builder 会重置平移和缩放状态。

如要平移，执行以下操作之一：

• 在视口 (Viewport) 中双击并拖动。
• 按住 Ctrl/Cmd + Alt/Option 键并在视口 (Viewport) 中单击并拖动。

要放大和缩小，请将鼠标指针放在视口 (Viewport) 中，并执行以下操作之一：

• 将鼠标指针放在视口 (Viewport) 中，然后旋转鼠标滚轮。
• 按住 Alt/Option 键并右键单击鼠标。向右拖动可放大，向左拖动可缩小。

设置 Avatar

画布 (Canvas) 可用于编辑、预览和与正在创作的 UI 文档 (UXML) 交互。如果看不到画布，请选择视口 (Viewport) 工具栏中的 适配视口 (Fit Viewport) 按钮将其显示出来。画布 (Canvas) 的标题显示当前加载的 UI 文档 (UXML) 的名称。名称旁边的星号 (*) 表示未保存的更改。

要调整画布 (Canvas) 的大小，请执行以下操作：

• 在视口 (Viewport) 内，拖动边缘或角。
• 选择画布 (Canvas) 标题可显示画布的检视面板 (Inspector) 窗口，您可以在其中输入画布的宽度和高度。

要将画布 (Canvas) 大小与 Unity Game 窗口的大小相匹配，请选中匹配游戏视图 (Match Game View) 复选框。

您可以更改画布 (Canvas) 背景，以便更轻松地编辑 UI。要更改背景，请在检视面板 (Inspector) 面板中选择画布 (Canvas)。您可以将其设置为纯色、特定纹理（UI 设计师的模型）或打开的 Unity 场景中的摄像机 (Camera) 的实时视图：

与画布 (Canvas) 相关的任何设置（如大小）都不会保存为 UI 文档 (UXML) 的一部分，而是在下次打开同一 UI 文档 (UXML) 时存储在单独的设置文件中。

以浅色或深色主题预览

默认情况下，UI Builder 使用 Unity 默认运行时主题。您可以使用浅色或深色编辑器主题预览 UI。为此，请确保启用了编辑器扩展创作 (Editor Extension Authoring)，然后从视口 (Viewport) 工具栏的主题下拉列表中选择深色编辑器主题 (Dark Editor Theme) 或浅色编辑器主题 (Light Editor Theme)。

Active Editor Theme 是您在 Unity 编辑器中设置的浅色或深色主题。

如果创建自定义主题，还可以从列表中选择该主题以在视口中进行预览。

代码预览

构建 UI 时，UI Builder 会自动生成底层 UXML 和 USS 文本，并将它们显示在 UXML 预览 (UXML Preview) 和 USS 预览 (USS Preview) 面板 中。

检视面板

UI Builder 检视面板 (Inspector) 窗格 类似于 Unity 检视面板 (Inspector) 窗口。检视面板 (Inspector) 显示的内容略有不同，具体取决于您在 UI Builder 中选择的对象：

• 选择元素，则会呈现三个部分：“属性”部分，用于显示单个元素 (UXML) 的属性；样式表 (StyleSheets) 部分，可用来指定样式表、分配样式类以及查看从该部分应用的样式；内联样式 (Inlined Styles) 部分，能够对单个元素的样式属性进行编辑。
• 选择 USS 选择器，则会呈现两个部分：样式选择器 (Style Selector) 部分，可更改选择器查询字符串；样式 (Styles) 部分，可编辑样式属性。
• 选择画布，则会呈现三个部分：画布大小 (Canvas Size) 部分，可更改画布大小；画布背景 (Canvas Background) 部分，可更改画布背景；文档设置 (Document Settings) 部分，可更改每个文档的编辑时间设置。

为 UI 文档 (UXML) 启用编辑器扩展创作

默认情况下，在 UI Builder 中创建的新 UI 文档 (UXML) 会在 UXML 中保存一条设置，用于将其标记为仅限运行时的 UI：

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">

这意味着，默认情况下，库 (Library) 面板的标准 (Standard) 选项卡仅包含运行时效果最好的元素。

要为 Unity 编辑器创建 UI，例如自定义编辑器窗口或自定义检视面板，可以启用 Editor Extension Authoring 以库 (Library) 面板的标准 (Standard) 选项卡中查看其他仅限编辑器 (Editor-Only) 控件。

要启用编辑器扩展创作：

• 选择画布 (Canvas) 标题以显示画布的检视面板 (Inspector) 窗口，在此窗口中选择文档设置 (Document Settings) > 编辑器扩展创作 (Editor Extension Authoring) 选项：

• 在库 (Library) 面板上的菜单中，选择编辑器扩展创作 (Editor Extension Authoring)。

注意：与其他画布 (Canvas) 设置不同，此设置保存在 UI 文档 (UXML) 根元素的 editor-extension-mode 属性中。

要默认在任何新的 UI 文档 (UXML) 上启用 编辑器扩展创作 (Editor Extension Authoring)，请执行以下操作：

1. 转到编辑 (Edit) > 项目设置 (Project Settings) > UI Builder。
2. 选择默认启用编辑器扩展创作 (Enable Editor Extension Authoring by Default)。

在 UI Builder 外部（例如在文本编辑器或 IDE 中）创建的 UI 文档 (UXML)，在 UI Builder 中打开之前，没有 Editor Extension Authoring 属性。但是，您可以随时在文本编辑器或 IDE 中通过 UI 文档 (UXML) 手动添加 editor-extension-mode 属性。首次在 UI Builder 中打开外部创建的 UI 文档 (UXML) 时，Editor Extension Authoring 属性将根据 UI Builder 项目设置中指定的默认值进行设置。

其他资源

• UI Builder 入门