UI Builder 入门

想了解如何使用 UI Builder 创建 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 生成器。

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

   

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

5. 将 VisualElement 从“库”拖到“层次结构”面板中。

   

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

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

7. 在“检查器”面板中，确保“Flex > Grow”处于1.这将flex-grow属性设置为1，使其覆盖整个屏幕。

   

8. 要将所有子元素居中，请将“对齐项”和“对齐内容”设置为Center.

   

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

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

   

创建父容器

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

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

   

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

3. 在“检查器”面板中，将“弯曲>方向”设置为row.

4. 将 Flex > Grow 设置为0.

5. 将 大小（Size） > 高度（Height） 设置为350像素。

   

创建角色名称列表容器

将 ListView 添加为容器的子元素以保存字符名称。

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

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

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

   

4. 将 大小（Size） > 宽度（Width） 设置为230像素。

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

   

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

7. 将 边框>颜色（Border Color） 设置为#311A11.

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

9. 将 边界>半径（Border Radius） 设置为15像素。

   

创建角色详细信息容器

在与#CharacterList以容纳字符详细信息容器。目的是当用户从左侧列表中选择一个角色时，它会显示该角色的肖像、姓名和职业。

1. 将 VisualElement 从“库”拖动到“层次结构”面板中的容器元素。这是用于容纳右侧所有元素的容器。

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

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

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

   

5. 添加另一个 VisualElement 作为正确容器的子项。

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

7. 将 Flex > Grow 设置为0.

8. 将 大小（Size） > 宽度（Width） 设置为276像素。

9. 在“对齐”部分中，将“对齐项”和“对齐内容”设置为center.

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

    

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

为边框样式创建 USS 类

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

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

您的 UI 布局现在如下所示：

创建人物肖像背景

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

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

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

3. 在“尺寸”部分中，将“宽度”和“高度”设置为120 像素计算机图像中的最小单位。像素大小取决于您的屏幕分辨率。像素光照是在每个屏幕像素下计算的。更多信息
   请参阅术语表.

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

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

6. 将 边框>颜色（Border Color） 设置为#311A11.

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

8. 将 边界>半径（Border Radius） 设置为13像素。

   

创建角色肖像前景

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

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

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

3. 将名称设置为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. 将“文本”>“字体样式”设置为B.

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

   

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

提取内联样式

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

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

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

其他资源

• 使用 UI Builder 设置元素样式