UI Builder 入门

想了解如何使用__ UI__（即用户界面，User Interface）让用户能够与您的应用程序进行交互。Unity 目前支持三种 UI 系统。更多信息
See in Glossary Builder 创建 UI 吗？请从使用此示例开始。

要在 UI Builder 中创建 UI，请执行以下操作：

1. 创建一个新的 UI 文档 (UXML)。
2. 添加元素以创建 UI 层级结构。
3. 在检视面板 (Inspector) 中设置属性和样式属性。
4. 当多个元素开始需要相同的样式属性时，请创建 USS 样式表和选择器。
5. 测试 UI，如果对结果满意，请将内联样式属性提取到 USS 类中。
6. 保存 UI 文档 (UXML)。

先决条件

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

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

概述示例

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

创建根元素

创建一个新项目，然后创建一个覆盖整个屏幕的根视觉元素。将根元素设置为具有背景颜色并将所有子元素居中到屏幕中间。

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

2. 选择窗口 (Window) > UI 工具包 (UI Toolkit) > UI Builder。

3. 在 UI Builder 窗口的视口 (Viewport) 窗口的左上角，选择 文件 (File) > 新建 (New) 以创建新的 UXML 文档。

   

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

5. 将 VisualElement 从库 (Library) 拖入层级结构 (Hierarchy) 面板。

   

   提示：还可以双击某个控件将其添加到层级结构 (Hierarchy) 面板。

6. 从层级结构 (Hierarchy) 中选择该元素。

7. 在检视面板 (Inspector) 窗口中，确保灵活 (Flex) > 增长 (Grow) 为 1。这会将 flex-grow 属性设置为 1，使其覆盖整个屏幕。

   

8. 要将所有子元素居中，请将对齐项目 (Align Items) 和对齐内容 (Justify Content) 都设置为 Center。

   

9. 将背景 (Background) > 颜色 (Color) 设置为 #732526。

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

   

创建父容器

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

1. 将 VisualElement 从 库 (Library) 拖到 层级结构 (Hierarchy) 面板中的根 VisualElement。

   

2. 从层级结构 (Hierarchy) 中选择该元素。

3. 在检视面板 (Inspector) 窗口中，将灵活 (Flex) > 方向 (Direction) 设置为 row。

4. 将灵活 (Flex) > 增长 (Grow) 设置为 0。

5. 将大小 (Size) > 高度 (Height) 设置为 350 个像素。

   

创建角色名称列表容器

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

1. 将 ListView 从库 (Library) 拖到层级结构 (Hierarchy) 面板中的容器 VisualElement 上。

2. 从层级结构 (Hierarchy) 中选择该元素。

3. 在检视面板 (Inspector) 窗口中，将名称 (Name) 设置为 CharacterList。

   

4. 将大小 (Size) > 宽度 (Width) 设置为 230 个像素。

5. 将间距 (Spacing) > 边距 (Margin) > 右 (Right) 设置为 6 个像素。

   

6. 将背景 (Background) > 颜色 (Color) 设置为 #6E3925。

7. 将边框 (Border) > 颜色 (Color) 设置为 #311A11。

8. 将边框 (Border) > 宽度 (Width) 设置为 4 个像素。

9. 将边框 (Border) > 半径 (Radius) 设置为 15 个像素。

   

创建角色详细信息容器

在与 #CharacterList 相同的父级下添加新的 VisualElement 以容纳角色详细信息容器。目的是当用户从左侧列表中选择角色时，会显示角色的肖像、名称和类。

1. 将 VisualElement 从库 (Library) 拖到 层级结构 (Hierarchy) 面板中的容器元素上。这是容纳右侧所有元素的容器。

2. 从层级结构 (Hierarchy) 中选择该元素。

3. 在检视面板 (Inspector) 窗口中，将对齐 (Align) > 对齐项目 (Align Items) 设置为 flex-end。

4. 将对齐 (Align) > 对齐内容 (Justify Content) 设置为 space-between。

   

5. 将另一个 VisualElement 添加为右容器的子项。

6. 从层级结构 (Hierarchy) 中选择该元素。

7. 将灵活 (Flex) > 增长 (Grow) 设置为 0。

8. 将大小 (Size) > 宽度 (Width) 设置为 276 个像素。

9. 在对齐 (Align) 部分，将 对齐项目 (Align Items) 和对齐内容 (Justify Content) 都设置为 center。

10. 将间距 (Spacing) > 填充 (Padding) 设置为 8 个像素。

    

11. 将背景 (Background) > 颜色 (Color) 设置为 #AA5939。

为边框样式创建 USS 类

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

1. 在 StyleSheet 面板中，选择 + > 创建新 USS (Create New USS)。
2. 将其命名为 MainView.uss 并选择保存 (Save)。
3. 单击添加新选择器… (Add new selector…) 字段并输入 .border。.border 选择器将显示在 StyleSheet 面板中。
4. 在 StyleSheet 面板中，选择 .border。
5. 在检视面板 (Inspector) 窗口中，将边框 (Border) > 颜色 (Color) 设置为 #311A11。
6. 将边框 (Border) > 宽度 (Width) 设置为 4 个像素。
7. 将边框 (Border) > 半径 (Radius) 设置为 15 个像素。
8. 将.border从 StyleSheet 面板拖到角色详细信息容器 VisualElement 上。
9. 将 .border 从 StyleSheet 面板拖动到 #CharacterList。
10. 选择 #CharacterList。
11. 在检视面板 (Inspector) 窗口中，右键单击边框 (Border) 并选择取消设置 (Unset) 以删除先前设置的内联样式。

UI 布局现在如下所示：

创建角色纵向背景

将各个 UI 控件添加到角色详细信息容器中。第一步是添加角色纵向背景。

1. 将 VisualElement 从库 (Library) 拖到角色详细信息容器中。

2. 从层级结构 (Hierarchy) 中选择该元素。

3. 在大小 (Size) 部分中，将宽度 (Width) 和高度 (Height) 都设置为 120 个像素。

4. 将间距 (Spacing) > 填充 (Padding) 设置为 4 个像素。

5. 将背景 (Background) > 颜色 (Color) 设置为 #FF8554。

6. 将边框 (Border) > 颜色 (Color) 设置为 #311A11。

7. 将边框 (Border) > 宽度 (Width) 设置为 2 个像素。

8. 将边框 (Border) > 半径 (Radius) 设置为 13 个像素。

   

创建角色纵向前景

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

1. 将 VisualElement 从库 (Library) 拖到角色详细信息容器中。

2. 从层级结构 (Hierarchy) 中选择该元素。

3. 将名称 (Name) 设置为 CharacterPortrait。

4. 将灵活 (Flex) > 增长 (Grow) 设置为 1，以便图像可以使用所有可用空间。

5. 将背景 (Background) > 缩放模式 (Scale Mode) 设置为 scale-to-fit，这样可以在保持正确纵横比的同时缩放图像，使其与元素大小匹配。

   

创建标签

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

1. 将标签 (Label) 从库 (Library) 拖动到层级结构 (Hierarchy) 面板中的字符详细信息容器。

2. 将 Name 设置为 CharacterName。

3. 将标签 (Label) 从库 (Library) 拖动到层级结构 (Hierarchy) 面板中的字符详细信息容器。

4. 将 Name 设置为 CharacterClass。

   

5. 选择 #CharacterName 元素。

6. 将文本 (Text) > 字体样式 (Font Style) 设置为 B。

7. 将文本 (Text) > 大小 (Size) 设置为 18 个像素。

   

8. 在视口 (Viewport) 窗口中，选择文件 (File) > 保存 (Save) 以将更改保存到 MainView.uxml。

提取内联样式

在 UI Builder 中，当元素数量较少时，可以创建元素，仅用内联样式来进行尝试。构建更复杂的 UI 时，使用样式表来管理样式会更加轻松便捷。您可以在 UI Builder 中将内联样式提取到样式表。

1. 选择根视觉元素。
2. 在检视面板 (Inspector) 窗口的样式类列表 (Style Class List) 字段中，输入 .background 作为类名称。
3. 选择提取内联样式到新类 (Extract Inline Styles to New Classs)。这会根据您为根元素设置的内联样式创建一个 .background 类选择器，并更新根视觉元素的 UI 文档 (UXML)，以便从内联样式改为使用该类选择器。
4. 在视口 (Viewport) 窗口中，选择文件 (File) > 保存 (Save)。

如果要继续创建列表视图运行时 UI 示例，可对其余所有元素重复样式提取步骤，并按照说明创建示例。

其他资源

• 使用 UI Builder 的样式元素