UI Builder 界面概述

要打开 UI Builder 窗口，请执行以下作：

• 选择窗口>UI 工具包> UI 生成器。这将打开之前使用 UIBuilder 加载的 UXML 文档。
• 在 项目（Project） 窗口中，双击UXML文件。

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

打开和保存UI文档（UXML）

要在 UI Builder 中打开 UI 文档：

• 使用UI Builder中的“文件”菜单视口用户在屏幕上应用的可见区域。
  请参阅术语表窗 格工具栏Unity 编辑器顶部的一排按钮和基本控件，允许您以各种方式（例如缩放、翻译）与编辑器交互。更多信息
  请参阅术语表，然后选择打开...。
• 在“库”窗格的“项目”选项卡中，右键单击文档，然后选择“在 UI 生成器中打开”。

要在默认文本编辑器或IDE中打开UI文档（UXML），请执行以下作：

• 使用 inlineStyle 文件图标。
  1. 转到 项目（Project） 窗口> 资产（Assets） 。
  2. 单击 UXML 文件图标中间的箭头。
  3. 双击 inlineStyle 文件图标。
• 使用“使用 IDE 打开”按钮。
  1. 在 UI Builder 中，转到库>项目选项卡。
  2. 打开“资产”文件夹。
  3. 右键点击 UI 文档 （UXML） 并选择 使用 IDE 打开（Open with IDE） 。
• 使用 UXML 预览（UXML Preview） 窗格。
  1. 在UI Builder中，确保当前已加载UI文档（UXML）。
  2. 转到 UXML 预览（UXML Preview） 窗格。
  3. 选择 UXML预览（UXML Preview） 窗格右上角的图标。

  

当前打开且处于活动状态的UI文档（UXML）资产名称在 层级（Hierarchy） 窗格中显示为根树项，在 视口（Viewport） 内的 画布（Canvas） 标题中，以及 视口（Viewport） 底部的 UXML预览（UXML Preview） 窗格中。名称旁边的星号 （*） 表示未保存的更改。

要保存UI文档（UXML）：

• 使用UI Builder的 视口（Viewport） 窗格工具栏中的 文件（File） > 保存（Save） 菜单。
• 使用 Ctrl/CMD + S。它还会提示您保存场景场景包含游戏的环境和菜单。将每个唯一的场景文件视为一个独特的关卡。在每个场景中，你放置你的环境、障碍物和装饰品，基本上是将你的游戏设计和构建成碎片。更多信息
  请参阅术语表在编辑器中。

注意：Unity 项目范围的保存不会保存在 UI Builder 中打开的活动 UI 文档 （UXML）。

样式表

UI Toolkit 中的样式表和 USS 选择器用于跨许多元素和 UI 文档 （UXML） 共享和应用样式。

在“样式表”窗格中，您可以：

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

等级制度

“层次结构”窗格包含表示当前文档的元素层次结构的树视图。它是您在UI文档（UXML）的UXL文本表示中看到的层次结构的超集。除了直接从 UXML 创建的元素外，层级窗格还包含动态创建的元素，这些元素仅存在于 UI 的运行时中。例如，层级（Hierarchy） 窗格包括属于模板实例（在当前文档中实例化的不同文档）的元素，而UXML只有一个<Instance>标记。

您可以使用“层次结构”窗格来：

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

元素根据其name属性。如果元素的name属性，它根据其 C# 类型显示。您可以双击元素以快速重命名它。

单击“层次结构”窗格标题右上角的⋮图标以访问显示选项菜单。

• 选择“类型”以强制层次结构显示每个元素的 C# 类型，而不管它是否有名称。
• 选择“类列表”（Class List） 以在其“层次结构”条目旁边显示每个元素的样式类列表。
• 选择“附加样式表”以在其元素旁边显示任何本地附加的样式表。

图书馆

“库”窗格类似于项目窗口一个窗口，显示您的内容Assets文件夹（项目选项卡）更多信息
在术语表中查看在 Unity 编辑器中。它列出了可用的 UI 元素。

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

您可以使用库窗口右上角的⋮图标并选择树视图，在图块和树视图之间更改此视图模式。

• “项目”选项卡列出自定义.uxml项目中的资产。它还列出了继承自VisualElement.要预览库的“项目”选项卡中的任何元素，请将鼠标悬停在它上面。预览将显示在“库”窗格的右侧。

若要实例化元素，请执行下列作之一：

• 将其拖到“层次结构”窗格中。
• 将元素拖到视口中的画布上。
• 双击元素。这会将元素添加为当前所选元素的同级元素。如果未选择任何内容，则将该元素添加到UI文档（UXML）的根目录下。

您可以在“层次结构”窗口或画布中选择元素。在层次结构中，按住 Ctrl（macOS：Cmd） 以选择其他元素。

视窗

视口（Viewport） 窗格在浮动的可调整大小的编辑时画布上显示UI文档（UXML）的输出。工具栏包含特定于 UI Builder 的命令、视口设置、主题选择器和预览按钮的菜单。您可以在 ⋮ 菜单下的视口右上角找到其他 UI Builder 设置，包括 Unity 的项目设置（Project Settings） 广泛的设置集合，允许您配置物理、音频、网络、图形、输入和项目的许多其他区域的行为方式。更多信息
请参阅术语表.

在视口中导航

平移和缩放以在视口中导航。UI Builder 会保存每个 UI 文档 （UXML） 的当前平移和缩放状态，并在 UI Builder 窗口重新加载、域重新加载或关闭并重新打开同一 UI 文档 （UXML） 时恢复它们。

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

要平移，请执行以下一项作：

• 在视口中单击并拖动。
• 按住 Ctrl/Cmd + Alt/Option 键，然后在视口中单击并拖动。

要放大和缩小，请将鼠标指针放在视口中，然后执行以下作之一：

• 将鼠标指针放置在视口中，然后旋转鼠标滚轮。
• 按住 Alt/Option 并拖动鼠标右键。向下拖动可放大，向上拖动可缩小。

设置画布

在画布中，你可以编辑、预览正在创作的UI文档（UXML）并与之交互。如果看不到它，请选择 视口（Viewport） 工具栏中的 适合视口（Fit Viewport） 按钮，将其带入视图。画布的标头显示当前加载的UI文档（UXML）的名称。名称旁边的星号 （*） 表示未保存的更改。

要调整画布大小：

• 在视口中，拖动边或角。
• 选择 Canvas 标题以显示检查器一个 Unity 窗口，显示有关当前选定游戏对象、资产或项目设置的信息，允许您检查和编辑值。更多信息
  请参阅术语表窗口，您可以在其中输入画布的宽度和高度。

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

您可以更改画布背景，以便更轻松地编辑 UI。若要更改背景，请在“检查器”面板中选择“画布”。您可以将其设置为纯色、特定纹理（来自 UI 设计器的模型）或来自相机在场景中创建特定视点图像的组件。输出要么绘制到屏幕上，要么作为纹理捕获。更多信息
请参阅术语表在开放的 Unity 场景中：

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

使用浅色或深色主题预览

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

活动编辑器主题是您在 Unity 编辑器中设置的浅色或深色主题。

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

代码预览

在构建UI时，UI Builder会自动生成底层UXML和USS文本，并将其显示在 UXML预览（UXML Preview） 和 USS预览（USS Preview） 窗格中。

检查员

UI Builder Inspector 窗格类似于 Unity Inspector 窗口。检查器显示的内容略有不同，具体取决于您在 UI 构建器中选择的对象：

• 元素显示每个元素 （UXML） 属性的属性部分，一个 StyleSheets 部分用于分配样式类并查看 StyleSheets 中应用的样式，以及一个 Inlineed Styles 部分，用于编辑内联每个元素样式属性。
• USS 选择器显示“样式选择器”部分以更改选择器查询字符串，并显示“样式”部分以编辑样式属性。
• 画布显示“画布大小”部分用于更改画布大小，显示“画布背景”部分用于更改编辑时画布背景，以及用于每个文档编辑时间设置的“文档设置”部分。

为UI文档启用编辑器扩展创作（UXML）

默认情况下，在UI Builder中创建的新UI文档（UXML）在UXML中保存了一个设置，将其标记为仅限运行时的UI：

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

这意味着，默认情况下，“库”窗格的“标准”选项卡仅包含运行时效果最佳的元素。

要为 Unity 编辑器创建 UI，例如自定义编辑器窗口或自定义检查器，您可以启用编辑器扩展创作，以在库窗格的标准选项卡中查看其他仅限编辑器的控件。

要启用编辑器扩展创作，请执行以下作：

• 选择画布标题以显示画布的“检查器”窗口，您可以在其中选择“文档设置>编辑器扩展创作”选项：

• 在“库”窗格的菜单中，选择“编辑器扩展创作”。

注意：与其他 Canvas 设置不同，此设置保存在editor-extension-modeUI 文档 （UXML） 根元素的属性。

要默认在任何新的UI文档（UXML）上启用编辑器扩展创作，请执行以下作：

1. 转到UI Builder> 编辑>项目设置（Edit Project Settings）。
2. 选择默认启用编辑器扩展创作。

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

其他资源

• UI Builder 入门