使用布局引擎的位置元素

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

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

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

UI 工具包包括标准 UI 组件的内置控件，例如按钮、切换或文本字段。这些内置控件具有影响其布局的样式。

主样式属性

以下是主要的样式属性：

• 弯曲>方向 (flex-direction在 USS 中）：定义主轴的布局方向。默认值为column这使得主轴从上到下运行。
• 灵活>增长 (flex-grow在 USS 中）：定义一个元素相对于其主轴的同级增长量。该值是与同一父容器中的同级共享的比率。如果您将flex-grow: 1对于两个子级，他们每个人都将获得同等份额的剩余空间，但前提是：
• 他们flex-basis值相等（或两者都设置为0).
• 它们的初始大小（内容）不会影响布局flex-basis: auto.

为确保无论内容如何都能均匀分割，请将flex-grow: 1和flex-basis: 0.这告诉布局引擎在分配空间时忽略内容大小。 - 弹性>基础 (flex-basis在 USS 中）：定义元素沿主轴的初始大小。默认值为auto，这意味着大小基于内容大小。您可以将其设置为特定值，例如100px，或设置为0忽略内容大小。 - 对齐>对齐项目 (align-items在 USS 中）：定义元素在横轴或垂直轴到主轴的对齐方式。例如，如果VisualElement那有flex-direction: column和align-items: flex-endset，两个 Button 将挤压在容器的右边缘。选项align-items有这样的名称flex-start和flex-end因为它们取决于flex-direction. - 对齐>对齐内容 (justify-content在 USS 中）：定义元素在主轴上的对齐方式。例如，如果VisualElement那有flex-direction: column和justify-content: flex-endset，两个按钮挤压容器的底部边缘。选项justify-content命名为flex-start和flex-end因为它们取决于flex-direction.

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

如果所选元素具有子元素，则在 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 样式属性。“位置”>“绝对”模式使元素对默认的基于 Flexbox 的布局引擎不可见。就好像它不再占用任何空间一样。绝对位置元素显示在相对位置的任何同级元素之上。

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

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

左、上、右、下也可以解释为锚点。例如，您可以锚定一个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 set to 0表示将偏移量设置为 0。
• Left unset不设置任何偏移量，并允许其他样式属性定义元素的宽度或高度。

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

• 如果同时设置了 Left 和 Right 属性，则句柄将更新 Right 属性。
• 如果设置“左”但未设置“右”，则句柄将更新“宽度”属性。

同时使用“相对”（Relative） 和“绝对（Absolute）

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

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

以下是 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>

上面的示例突出显示了绝对位置的使用。将左、上、右、下>所有位置设置为0，所以位置是0距离屏幕边缘的像素。这使得#overlay元素重叠#complex-ui-screencontainer 元素。您还可以将半透明背景设置为#overlay元素，使另一个 UI 显示变暗。用#overlay将 相对位置 设置为 我们的中心#popup容器VisualElement.

最佳做法

以下列表提供了有助于提高布局引擎性能的提示：

• 将width和height以定义元素的大小。

• 使用flexGrow财产（USS：flex-grow: <value>;） 为元素分配灵活大小。的值flexGrow属性在元素由其同级确定时为元素的大小分配基本权重。

• 将flexDirection属性设置为row (美国海军：flex-direction: row;） 切换到水平布局。

• 使用相对定位根据元素的原始布局位置偏移元素。

• 将position属性设置为absolute相对于其父位置矩形放置元素。这不会影响其同级或父级的布局。

其他资源

• USS 属性参考
• USS 共同属性
• 使用 USS 设置 UI 样式
• 相对和绝对定位 C# 示例