使用布局引擎定位元素

UI 工具包包括一个布局引擎，可根据布局和样式属性定位元素。布局引擎使用 Yoga 的布局原则，实现了名为 Flexbox 的 HTML/CSS 布局系统的子集。UI 工具包属性匹配 Yoga 布局行为。UI 工具包支持 Flexbox 中的大多数属性。

默认情况下，所有元素都是布局的一部分。布局具有以下默认行为：

容器垂直分配其子项。
容器矩形的位置包括其子矩形。其他布局属性可能限制此行为。
带文本的 VisualElement 在其大小计算中使用文本大小。其他布局属性可能限制此行为。

UI 工具包提供了标准__ UI__（即用户界面，User Interface）让用户能够与您的应用程序进行交互。Unity 目前支持三种 UI 系统。更多信息
See in Glossary 控件的内置控件，如按钮、开关、文本字段或标签。这些内置控件具有影响其布局的样式。

主要样式属性

以下是主要样式属性：

灵活 (Flex) > 方向 (Direction)（USS 中的 flex-direction）：定义主轴的布局方向。默认值为 column，这使得主轴从上到下运行。
灵活 (Flex) > 增长 (Grow)（USS 中的 flex-grow）：定义元素应在主轴中如何增长。这是一个与同一父项的所有其他同级共享的比例。尝试使元素拉伸以占据其父项的整个大小（减去任何同级元素）时，此属性很有用。为此，请将灵活 (Flex) > 增长 (Grow) 值设置为 1。如果您有两个同级的 flex-grow 设置为 1，则每个同级将沿主轴占用父级可用大小的 50%。
对齐 (Align) > 对齐项目 (Align Items)（USS 中的 align-items）：定义元素在横轴或垂直于主轴的轴上的对齐方式。例如，如果 VisualElement 中有两个设置了 flex-direction: column 和 align-items: flex-end 的按钮，这两个按钮将挤压在容器的右边缘。align-items 的选项具有 flex-start 和 flex-end 等名称，因为它们取决于 flex-direction 的值。
对齐 (Align) > 对齐内容 (Justify Content)（USS 中的 justify-content）：定义元素在主轴中的对齐方式。例如，如果 VisualElement 中有两个设置了 flex-direction: column 和 justify-content: flex-end 的按钮，这两个按钮会挤压在容器的底边。justify-content 的选项名称与 flex-start 和 flex-end 类似，因为它们取决于 flex-direction 的值。

有关更多信息，请参阅灵活布局。

如果所选元素具有子元素，则在 UI Builder 中，可以使用标题中的切换在视口中切换与灵活相关的样式属性。下图显示了可用于 #menu 元素的选项：

您可以使用样式属性来创建复杂的动态布局。以下是将 Button 锚定在屏幕右下角边缘的布局示例：

此布局的 UXML 显示了每个容器 VisualElement 上设置的内联样式，如下所示：

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <ui:VisualElement name="screen-is-blue" style="flex-grow: 1; justify-content: flex-end; background-color: blue;">
        <ui:VisualElement name="toolbar-is-orange" style="align-items: flex-end; background-color: orange;">
            <ui:Button text="Button" display-tooltip-when-elided="true" />
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

容器的颜色显示其形状。您可以使用嵌套的 VisualElement 容器来实现任何动态布局，而无需显式设置每个元素的位置和大小。这样可以保持布局动态，并自动适应更大的容器变化大小，例如屏幕变化大小。

绝对位置

UI Builder 还支持位置 (Position) 样式属性。位置 (Position) > 绝对 (Absolute) 模式使元素对默认的基于 Flexbox 的布局引擎不可见。就好像不再需要任何空间一样。绝对 (Absolute) 位置元素显示在相对 (Relative) 位置的所有同级元素之上。

使用绝对 (Absolute) 位置时，可使用位置 (Position) > 左 (Left)、上 (Top)、右 (Right)、下 (Bottom) 样式属性，使元素从其父项的相应边缘偏移和调整大小。这不会设置屏幕上的绝对坐标，而是设置相对于父元素的偏移。您仍然可以使用相对 (Relative) 模式来定位父元素。如果同时设置了左 (Left) 偏移和右 (Right) 偏移，则元素的宽度 (Width) 样式属性将被忽略，并且计算的宽度现在将来自以下公式：

element-computed-width = parent-width - left-offset - right-offset

左 (Left)、上 (Top)、右 (Right)、下 (Bottom) 也可以解释为锚点。例如，可将 Button 锚定在屏幕左下角：

下面的 UXML 显示内联样式：

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    <ui:VisualElement style="flex-grow: 1;">
        <ui:VisualElement style="position: absolute; left: 0; bottom: 0;" />
    </ui:VisualElement>
</ui:UXML>

在定位时，将左 (Left) 设置为 0 和取消设置左 (Left) 之间存在区别：

Left set to 0 表示将偏移设置为 0。
Left unset 不设置任何偏移，而是让其他样式属性定义元素的宽度或高度。

您还可以通过元素蓝色选择边框的每个边缘和角上的额外大小调整控点，直接在画布中修改这些偏移样式属性。区分已设置和未设置的内容非常重要，因此画布还包括“锚点”开关，即元素每侧的橙色方块。画布控点将根据设置的“锚点”调整在视觉上调整元素大小时设置的样式属性。例如，假设正在通过右边框控点调整画布中元素的大小：

如果同时设置左 (Left) 和右 (Right) 属性，控点将更新右 (Right) 属性。
如果设置左 (Left) 但未设置右 (Right)，控点将更新宽度 (Width) 属性。

使用相对位置和绝对位置

避免使用绝对 (Absolute) 位置模式，因为它绕过 UI 工具包中的内置布局引擎，并可能导致高维护性的 UI，在这种情况下更改整体布局需要手动更新各个元素。但是，绝对 (Absolute) 定位适用于特定的用例，例如覆盖层。在其他复杂 UI（例如弹出窗口或下拉选单）之上覆盖一些复杂 UI 很有用。在这些情况下，对覆盖层容器使用绝对 (Absolute) 位置，但对覆盖层内的元素继续使用相对 (Relative) 模式以保持灵活性。

以下显示了一个简单的居中弹出窗口示例：

AbsolutePositionOverlayWithPopup 以下是 UXML 供您参考：

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <ui:VisualElement name="complex-ui-screen">
        <ui:Toggle label="Toggle" />
        <ui:MinMaxSlider picking-mode="Ignore" label="Min/Max Slider" min-value="10" max-value="12" low-limit="-10" high-limit="40" />
        <ui:Label text="Label" />
        <ui:Button text="Button" />
        <ui:Button text="Button" />
    </ui:VisualElement>
    <ui:VisualElement name="overlay" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.71); align-items: center; justify-content: center;">
        <ui:VisualElement name="popup" style="background-color: rgba(70, 70, 70, 255);">
            <ui:Label text="Exit?" name="message" />
            <ui:Button text="OK" name="ok-button" style="width: 108.3333px;" />
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

上方示例重点介绍了绝对 (Absolute) 位置的使用。将所有位置 (Position) > 左 (Left)、上 (Top)、右 (Right)、下 (Bottom) 设置为 0，因此位置是远离屏幕边缘的 0 像素。这使得 #overlay 元素与 #complex-ui-screen 容器元素重叠。还可以为 #overlay 元素设置半透明背景，使另一个 UI 看起来变暗。使用 #overlay 可设置相对 (Relative) 位置以居中显示 #popup 容器 VisualElement。

最佳实践

下面列出了有关如何改进布局引擎性能的技巧：

设置 width 和 height 来定义元素的大小。
使用 flexGrow 属性 (USS: flex-grow: <value>;) 可为元素分配灵活大小。当元素的大小由其同级元素决定时，flexGrow 属性的值会为其大小分配一个基本权重。
将 flexDirection 属性设置为 row (USS: flex-direction: row;) 可切换到水平布局。
使用相对定位根据元素的原始布局位置来偏移元素。
将 position 属性设置为 absolute 以便相对于父位置矩形来放置某个元素。这不会影响其同级和父项的布局。

其他资源

USS 公共属性

相对定位和绝对定位

Unity 手册

使用布局引擎定位元素

主要样式属性

绝对位置

使用相对位置和绝对位置

最佳实践

其他资源