相对和绝对定位

此示例演示了相对定位和绝对定位之间的区别。此示例还演示了如何使用 C# 和 UXML/USS 添加 UI 控件并设置其样式。

示例概述

该示例使用自动布局系统将框添加到编辑器和运行时 UI。一个框显示25 px，而另一个框则显示了25 px, 25 px.

该示例使用 C# 脚本构建编辑器 UI，使用 UXML 和 CSS 构建运行时 UI。

您可以在此 GitHub 存储库中找到此示例创建的已完成文件。

先决条件

本指南适用于熟悉 Unity 编辑器、UI 工具包和 C# 脚本的开发人员。在开始之前，请熟悉以下内容：

创建编辑器UI的示例

创建一个自定义编辑器窗口，并使用 C# 脚本添加所有框：四个灰色背景的框，用于比较;一个使用绝对位置放置设置的黑色背景框;一个使用相对位置放置设置的紫色背景的盒子。

使用任何模板创建 Unity 项目。
右键点击项目（Project）窗口，然后选择创建>UI 工具包（Create UI Toolkit > 编辑器窗口（Editor Window）。
在“UI 工具包编辑器窗口创建器”窗口的“C#”框中，输入PositioningTestWindow.
清除 UXML 和 USS 复选框。
选择确认。这将创建一个名为PositioningTestWindow.cs.

取代PositioningTestWindow.cs内容如下：

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class PositioningTestWindow : EditorWindow
{
    [MenuItem("Window/UI Toolkit/Positioning Test Window")]
    public static void ShowExample()
    {
        var wnd = GetWindow<PositioningTestWindow>();
        wnd.titleContent = new GUIContent("Positioning Test Window");
    }

    public void CreateGUI()
    {
        for (int i = 0; i < 2; i++)
        {
            var temp = new VisualElement();
            temp.style.width = 70;
            temp.style.height = 70;
            temp.style.marginBottom = 2;
            temp.style.backgroundColor = Color.gray;
            this.rootVisualElement.Add(temp);
        }

        // Relative positioning
        var relative = new Label("Relative\nPos\n25, 0");
        relative.style.width = 70;
        relative.style.height = 70;
        relative.style.left = 25;
        relative.style.marginBottom = 2;
        relative.style.backgroundColor = new Color(0.2165094f, 0, 0.254717f);
        this.rootVisualElement.Add(relative);

        for (int i = 0; i < 2; i++)
        {
            var temp = new VisualElement();
            temp.style.width = 70;
            temp.style.height = 70;
            temp.style.marginBottom = 2;
            temp.style.backgroundColor = Color.gray;
            this.rootVisualElement.Add(temp);
        }

        // Absolute positioning
        var absolutePositionElement = new Label("Absolute\nPos\n25, 25");
        absolutePositionElement.style.position = Position.Absolute;
        absolutePositionElement.style.top = 25;
        absolutePositionElement.style.left = 25;
        absolutePositionElement.style.width = 70;
        absolutePositionElement.style.height = 70;
        absolutePositionElement.style.backgroundColor = Color.black;
        this.rootVisualElement.Add(absolutePositionElement);
    }
}

要查看示例，请从菜单中选择窗口>UI 工具包>定位测试窗口。

创建运行时 UI 的示例

创建一个名为 USS 文件PositioningTest.uss内容如下：

.box {
    height: 70px;
    width: 70px;
    margin-bottom: 2px;
    background-color: gray;
}
#relative{
    width: 70px;
    height: 70px;
    background-color: purple;
    left: 25px;
    margin-bottom: 2px;
    position:relative;
}
#absolutePositionElement{
    left: 25px;
    top: 25px;
    width: 70px;
    height: 70px;
    background-color: black;
    position: absolute;
}

创建一个名为PositioningTest.uxml内容如下：

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements"
xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements"
editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd"
editor-extension-mode="False">
    <Style src="PositioningTest.uss"/>
    <ui:VisualElement class="box"/>
    <ui:VisualElement  class="box"/>
    <ui:Label text="Relative\nPos\n25, 0" name="relative" />
    <ui:VisualElement  class="box"/>
    <ui:VisualElement  class="box"/>
    <ui:Label text="Absolute\nPos\n25, 25" name="absolutePositionElement" />
</ui:UXML>

创建名为PositioningTestRuntime.cs内容如下：

using UnityEngine;
using UnityEngine.UIElements;

public class PostionTestRuntime : MonoBehaviour
{
    void OnEnable()
    {
        GetComponent<UIDocument>();
    }
   }

右键单击“层次结构”窗口，然后选择“UI 工具包”>“UI 文档”。
在UI文档的检查器（Inspector）窗口中，选择 UI 文档（UI Document） > 源资产（Source Asset） > 定位测试（PositioningTest）。
在 UI 文档的 Inspector 窗口中，选择 Add Component > Positioning Test Runtime。
进入播放模式并根据需要调整分辨率以查看结果。

其他资源

使用布局引擎的位置元素

设置背景图像

手册

相对和绝对定位

示例概述

先决条件

创建编辑器UI的示例

创建运行时 UI 的示例

其他资源