Unity3D

Unity3D ：定位元件

ygtu

May 23, 2023 • 7 min read

推荐：将NSDT场景编辑器加入你的3D工具链

3D工具集：NSDT简石数字孪生

定位元件

相对位置和弹性框

UI Toolkit使用Yoga的修改版本，这是Flexbox布局引擎的实现。Flexbox 是一个常见的 CSS 布局引擎。一些主要的样式属性是：

Flex > Direction（在 USS 中）：设置哪些元素的布局方向或主轴。默认值为，这意味着，在没有任何其他重写的情况下，具有此样式属性的父元素下的子元素将显示在列中第二个子元素的上方。flex-directioncolumn
Flex > Grow（在 USS 中）：此属性定义元素在主轴上应如何增长。这是一个与同一父母的所有其他兄弟姐妹共享的比例。当尝试使元素拉伸以占用其父元素的整个大小（减去任何同级）时，此属性很有用。为此，请将“弹性>增长”值设置为。如果有两个同级设置为，则它们将沿主轴分别占用父级可用大小的 50%。flex-grow1flex-grow1
对齐>对齐项目（在 USS 中）：此属性定义十字轴或垂直轴与主轴中元素的对齐方式。例如，如果 a 中有两个按钮，则这两个按钮将挤压容器的右边缘。的选项具有类似和的名称，因为它们取决于的值。align-itemsVisualElementflex-direction: columnalign-items: flex-endalign-itemsflex-startflex-endflex-direction
对齐>对齐内容（在 USS 中）：此属性定义主轴中元素的对齐方式。例如，如果 a 中有两个按钮，则这两个按钮会挤压容器的底部边缘。的选项命名为 like 和，因为它们取决于的值。justify-contentVisualElementflex-direction: columnalign-items: flex-endjustify-contentflex-startflex-endflex-direction

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

建议了解弹性框的工作原理。有关详细信息，请参阅弹性框指南。

您可以使用上述弹性框样式属性和 s 层次结构的组合来创建复杂的动态布局。下面是将锚定在屏幕右下边缘的布局示例：VisualElementButton

此布局的 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 生成器还公开位置样式属性。若要使用“位置样式”属性，必须将“位置”>“位置类型”设置为“绝对”。此绝对模式使元素对基于 Flexbox 的默认布局引擎不可见。就好像它不再占用任何空间一样。绝对位置元素将显示在仍在使用相对位置的任何同级元素之上。

不建议使用绝对位置模式，因为它会绕过 UI 工具包中的内置布局引擎。它还可能导致高维护 UI，其中更改整体布局需要手动更新单个元素。

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

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

左、上、右、底也可以解释为锚点。例如，您可以在屏幕右下角锚定：Button

下面的 UXML 显示了内联样式：

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <ui:Button text="Button" style="position: absolute; right: 0; bottom: 0;" />
</ui:UXML>

使用定位时，将“左”设置为“和将”左“设置为”未设置“之间存在差异：0

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

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

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

同时使用相对和绝对

绝对位置模式的合法用例之一是叠加。将一些复杂的 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>

上面的示例突出显示了绝对位置的使用。将所有位置>左、上、右、下设置为，以便位置远离屏幕边缘的像素。这使元素与容器元素重叠。还可以为元素设置半透明背景，以使其他 UI 显示为暗色。用于设置相对位置以居中我们的容器。00#overlay#complex-ui-screen#overlay#overlay#popupVisualElement

由3D建模学习工作室整理翻译，转载请注明出处！

上一篇：Unity3D ：UI 生成器中的 USS 变量 (mvrlink.com)

下一篇：Unity3D ：设置背景图像 (mvrlink.com)