使用检视面板创建绑定

版本：2021.3+

此示例演示了如何在自定义检视面板、自定义编辑器和序列化对象之间创建绑定。

示例概述

此示例创建了以下内容：

一个自定义 Inspector__ UI__（即用户界面，User Interface）让用户能够与您的应用程序进行交互。Unity 目前支持三种 UI 系统。更多信息
See in Glossary 组件，其中包含两个字段，这两个字段绑定到游戏对象的名称和 USS 变换的比例。
在 InspectorElement 中创建相同绑定的自定义 Editor 窗口。

您可以在此 GitHub 代码仓库中找到此示例创建的完整文件。

先决条件

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

定义自定义检视面板组件

定义一个名为 TankScript 的自定义 Inspector UI 类，使用 USS 对其进行样式设置，并在 UXML 中设置视觉元素和绑定路径。

在项目 (Project) 窗口中，创建一个名为 create-a-binding-inspector 的文件夹来存储所有文件。

创建一个名为 TankScript.cs 的 C# 脚本，并将其内容替换为以下内容：

using UnityEngine;

[ExecuteInEditMode]
public class TankScript : MonoBehaviour
{
    public string tankName = "Tank";
    public float tankSize = 1;

    private void Update()
    {
        gameObject.name = tankName;
        gameObject.transform.localScale = new Vector3(tankSize, tankSize, tankSize);
    }
}

在 create-a-binding-inspector 文件夹中，创建一个名为 Editor 的文件夹。

在 Editor 文件夹中，创建一个名为 tank_inspector_styles.uss 的 USS 文件，并将其内容替换为以下内容：

.container {
    background-color: rgb(80, 80, 80);
    flex-direction: column;
}
Label {
    background-color: rgb(80, 80, 80);
}
TextField:hover {
    background-color: rgb(255, 255, 0);
}
FloatField {
    background-color: rgb(0, 0, 255);
}

创建一个名为 tank_inspector_uxml.uxml 的 UXML 文件，并将其内容替换为以下内容：

<UXML xmlns="UnityEngine.UIElements" xmlns:ue="UnityEditor.UIElements">
    <Style src="tank_inspector_styles.uss" />
    <VisualElement name="row" class="container">
        <Label text="Tank Script - Custom Inspector" />
        <ue:PropertyField binding-path="tankName" name="tank-name-field" />
        <ue:PropertyField binding-path="tankSize" name="tank-size-field" />
    </VisualElement>
</UXML>

使用绑定创建 Inspector UI

创建一个 C# 脚本来注册 TankScript 的自定义检视面板。无需调用 Bind() 方法，因为 Inspector 窗口中的绑定是隐式的。

创建一个名为 TankEditor.cs 的 C# 脚本，并将其内容替换为以下代码：

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

[CustomEditor(typeof(TankScript))]
public class TankEditor : Editor
{
    [SerializeField]
    VisualTreeAsset visualTree;

    public override VisualElement CreateInspectorGUI()
    {
        var uxmlVE = visualTree.CloneTree();
        return uxmlVE;
    }
}

在项目 (Project) 窗口中，选择 TankEditor.cs。
将 tank_inspector_uxml.uxml 拖动到检视面板 (Inspector) 中的视觉树 (Visual Tree)。
在检视面板 (Inspector) 中将 tank_inspector_styles.uss 拖动到样式表。

测试第一个绑定

在 Unity 中，将空游戏对象添加到场景中。
选择游戏对象，然后将 TankScript.cs 拖动到检视面板 (Inspector) 中的添加组件 (Add Component)。这会在检视面板 (Inspector) 中生成 Tank Script 组件。
在 Tank Script 中，可以在 Tank Name 框中更改坦克的名称，并在 Tank Size 框中更改变换 (Transform) 缩放值。

与 `InspectorElement` 绑定

创建一个自定义 Editor 窗口，其中包含两个绑定到 TankScript 对象的字段。创建一个调用 InspectorElement 构造函数的 C# 脚本。InspectorElement 会创建 UI 并将 UI 自动绑定到对象。

创建一个名为 SimpleBindingExampleInspectorElement.cs 的 C# 文件，并将其内容替换为以下内容：

using UnityEditor;
using UnityEngine;
using UnityEditor.UIElements;
    
namespace UIToolkitExamples
{
    public class SimpleBindingExampleInspectorElement : EditorWindow
    {
        [MenuItem("Window/UIToolkitExamples/Simple Binding Example Inspector Element")]
        public static void ShowDefaultWindow()
        {
            var wnd = GetWindow<SimpleBindingExampleInspectorElement>();
            wnd.titleContent = new GUIContent("Simple Binding with Inspector Element");
        }
    
        TankScript m_Tank;
        public void OnEnable()
        {
            m_Tank = FindObjectOfType<TankScript>();
            if (m_Tank == null)
                return;
    
            var inspector = new InspectorElement(m_Tank);
            rootVisualElement.Add(inspector);
        }
    }
}

测试第二个绑定

在 Unity 中，选择窗口 (Window) > UIToolkitExamples > 简单绑定示例检视器元素 (Simple Binding Example Inspector Element)。
在 Editor 窗口中，如果更改字段中的值，检视面板中的值会更改，反之亦然。

其他资源

与 UXML 和 C# 脚本绑定

绑定到嵌套属性