UI Builder 入门

想学习如何使用 UI Builder 创建 UI(用户界面) 允许用户与您的应用程序交互。Unity 目前支持三种 UI 系统。 更多信息
参见 词汇表？使用此示例开始。

在 UI Builder 中创建 UI

1. 创建一个新的 UI 文档 (UXML)。
2. 添加元素以创建您的 UI 层次结构。
3. 在 检查器一个 Unity 窗口，显示有关当前选定游戏对象、资源或项目设置的信息，允许您检查和编辑值。 更多信息
   参见 词汇表 中设置属性和样式属性。
4. 当多个元素开始需要相同的样式属性时，创建 USS 样式表和选择器。
5. 测试您的 UI，如果您对结果满意，将内联样式属性提取到 USS 类。
6. 保存 UI 文档 (UXML)。

先决条件

在您开始之前，请熟悉以下内容

• 视觉元素和视觉树简介
• UXML 简介
• USS 简介
• UI Builder 界面概述

示例概述

此示例创建了 创建列表视图运行时 UI 示例的主视图。它创建一个根元素作为背景，并包含两个容器。一个容器保存角色名称列表，另一个容器保存角色详细信息。在角色详细信息容器中，您添加背景和前景框架。最后，您添加两个标签用于角色名称。此示例不会创建角色名称列表条目 UI。

创建根元素

创建一个新项目，然后创建一个覆盖整个屏幕的根 视觉元素视觉树的节点，实例化或派生自 C# VisualElement 类。您可以设置外观样式，定义行为，并将其作为 UI 的一部分显示在屏幕上。 更多信息
参见 词汇表。设置您的根元素以具有背景颜色，并将所有子元素居中到屏幕中间。

1. 在 Unity 中使用任何模板创建一个项目。

2. 选择 窗口 > UI 工具包 > UI Builder。

3. 在 UI Builder 窗口中，在 视口 窗口的左上角，选择 文件 > 新建 以创建一个新的 UXML 文档。

   

4. 将其命名为 MainView.uxml 并保存。

5. 从 库 拖动 VisualElement 到 层次结构 面板。

   

   提示：您也可以双击控件将其添加到 层次结构 面板。

6. 从 层次结构 面板中选择元素。

7. 在 检查器 面板中，确保 弹性 > 增长 为 1。这将 flex-grow 属性设置为 1，使其覆盖整个屏幕。

   

8. 要使所有子元素居中，请将 对齐项目 和 对齐内容 均设置为 居中。

   

9. 将 背景 > 颜色 设置为 #732526。

   注意： 默认情况下，颜色的 Alpha 值为 0，使其完全透明。要使颜色不透明，请将 Alpha 值设置为 255。

   

创建父容器

在根元素下创建一个新的 VisualElement。此元素成为 UI 左右部分的父容器。

1. 从 库 拖动 VisualElement 到 层次结构 面板中的根 VisualElement。

   

2. 从 层次结构 面板中选择元素。

3. 在 检查器 面板中，将 弹性 > 方向 设置为 行。

4. 将 弹性 > 增长 设置为 0。

5. 将 大小 > 高度 设置为 350 像素。

   

创建角色名称列表容器

将 ListView 作为容器的子元素添加，以保存角色名称。

1. 从 库 拖动 ListView 到 层次结构 面板中的容器 VisualElement。

2. 从 层次结构 面板中选择元素。

3. 在 检查器 面板中，将 名称 设置为 CharacterList。

   

4. 将 大小 > 宽度 设置为 230 像素。

5. 将 间距 > 边距 > 右边距 设置为 6 像素。

   

6. 将 背景 > 颜色 设置为 #6E3925。

7. 将 边框 > 颜色 设置为 #311A11。

8. 将 边框 > 宽度 设置为 4 像素。

9. 将 边框 > 半径 设置为 15 像素。

   

创建角色详细信息容器

在与 #CharacterList 相同的父元素下添加一个新的 VisualElement 以保存角色详细信息容器。目的是，当用户从左侧列表中选择一个角色时，它会显示该角色的肖像、姓名和职业。

1. 从 库 拖动 VisualElement 到 层次结构 面板中的容器元素。这是保存右侧所有元素的容器。

2. 从 层次结构 面板中选择元素。

3. 在 检查器 面板中，将 对齐 > 对齐项目 设置为 flex-end。

4. 将 对齐 > 对齐内容 设置为 space-between。

   

5. 将另一个 VisualElement 作为右侧容器的子元素添加。

6. 从 层次结构 面板中选择元素。

7. 将 弹性 > 增长 设置为 0。

8. 将 大小 > 宽度 设置为 276 像素。

9. 在 对齐 部分，将 对齐项目 和 对齐内容 均设置为 居中。

10. 将 间距 > 填充 设置为 8 像素。

    

11. 将 背景 > 颜色 设置为 #AA5939。

为边框样式创建 USS 类

角色详细信息容器将使用与角色名称列表容器相同的边框样式。创建一个 USS 类以应用于两个容器。

1. 在 样式表 面板中，选择 + > 创建新的 USS。
2. 将其命名为 MainView.uss 并选择 保存。
3. 单击 添加新选择器… 字段并输入 .border。一个 .border 选择器出现在 样式表 面板中。
4. 在 样式表 面板中，选择 .border。
5. 在 检查器 面板中，将 边框 > 颜色 设置为 #311A11。
6. 将 边框 > 宽度 设置为 4 像素。
7. 将 边框 > 半径 设置为 15 像素。
8. 将 .border 从 样式表 面板拖动到角色详细信息容器 VisualElement。
9. 将 .border 从 样式表 面板拖动到 #CharacterList。
10. 选择 #CharacterList。
11. 在 检查器 面板中，右键单击 边框 并选择 取消设置 以删除您之前设置的内联样式。

您的 UI 布局现在看起来像这样

创建角色肖像背景

将单个 UI 控件添加到角色详细信息容器。第一步是添加角色肖像背景。

1. 从 库 拖动 VisualElement 到角色详细信息容器。

2. 从 层次结构 面板中选择元素。

3. 在 大小 部分，将 宽度 和 高度 均设置为 120 像素计算机图像中最小的单位。像素大小取决于您的屏幕分辨率。每个屏幕像素都会计算像素光照。 更多信息
   参见 词汇表。

4. 将 间距 > 填充 设置为 4 像素。

5. 将 背景 > 颜色 设置为 #FF8554。

6. 将 边框 > 颜色 设置为 #311A11。

7. 将 边框 > 宽度 设置为 2 像素。

8. 将 边框 > 半径 设置为 13 像素。

   

创建角色肖像前景

接下来在角色详细信息容器中，添加实际图像的前景。

1. 从 库 拖动 VisualElement 到角色详细信息容器。

2. 从 层次结构 面板中选择元素。

3. 将 名称 设置为 CharacterPortrait。

4. 将 弹性 > 增长 设置为 1，以便图像可以使用所有可用空间。

5. 将 背景 > 比例模式 设置为 scale-to-fit，以便您可以缩放图像以匹配元素大小，同时保持正确的纵横比。

   

创建标签

将两个标签控件添加到角色详细信息容器，以显示所选角色的姓名和职业。

1. 从 库 拖动 标签 到 层次结构 面板中的角色详细信息容器。

2. 将 名称 设置为 CharacterName。

3. 从 库 拖动 标签 到 层次结构 面板中的角色详细信息容器。

4. 将 名称 设置为 CharacterClass。

   

5. 选择 #CharacterName 元素。

6. 将 文本 > 字体样式 设置为 B。

7. 将 文本 > 大小 设置为 18 像素。

   

8. 在 视口 窗口中，选择 文件 > 保存 以保存对 MainView.uxml 的更改。

提取内联样式

在 UI Builder 中，您可以创建元素并仅使用内联样式进行实验，直到元素数量仍然较少。随着您构建更复杂的 UI，使用样式表来管理样式会更容易。您可以在 UI Builder 中将内联样式提取到样式表中。

1. 选择根视觉元素。
2. 在 检查器 面板中，在 样式类列表 字段中，输入 .background 作为类名。
3. 选择 将内联样式提取到新类。这将创建一个 .background 类选择器，其中包含您为根元素设置的内联样式，并更新 UI 文档 (UXML) 以使用类选择器而不是内联样式。
4. 在 视口 窗口中，选择 文件 > 保存。

如果您想继续处理 创建列表视图运行时 UI 示例，您可以重复这些步骤以提取所有其他元素的样式，并按照说明创建示例。

其他资源

• 使用 UI Builder 设置元素样式