Unity3D

Unity3D ：创建可绑定的自定义控件

ygtu

May 24, 2023 • 4 min read

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

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

创建可绑定的自定义控件

版本： 2021.2+

此示例演示如何在自定义编辑器窗口中创建可绑定的自定义控件。

示例概述

此示例创建一个绑定到具有双精度数据类型的属性的自定义控件。您可以调整此示例以绑定到具有其他数据类型（如字符串或整数）的属性。

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

先决条件

对于熟悉 Unity 编辑器、UI 工具包和 C# 脚本的开发人员来说，这是一个高级示例。建议您对以下概念有基本的了解：

用户界面生成器
可视化树
用户体验
序列化对象数据绑定

创建自定义控件类

创建 C# 类以定义自定义控件。

使用任何模板创建 Unity 项目。
创建一个名为用于存储文件的文件夹。ExampleField

在该文件夹中，创建一个名为的 C# 脚本，并将其内容替换为以下内容：ExampleFieldExampleField.cs

using UnityEngine.UIElements;

namespace UIToolkitExamples
{
    // ExampleField inherits from BaseField with the double type. Therefoe, the ExampleField's underlying value is a double.
    public class ExampleField : BaseField<double>
    {
        // We can provide the existing BaseFieldTraits class as a type parameter for UxmlFactory, and this means we
        // don't need to define our own traits class or override its Init() method. We do, however, need to provide it
        // However, you must provide the value type (double) and its attribute description type:
        // (UxmlDoubleAttributeDescription).
        public new class UxmlFactory :
            UxmlFactory<ExampleField, BaseFieldTraits<double, UxmlDoubleAttributeDescription>> { }

        Label m_Input;

        // Default constructor is required for compatibility with UXML factory
        public ExampleField() : this(null)
        {

        }

        // Main constructor accepts label parameter to mimic BaseField constructor.
        // Second argument to base constructor is the input element, the one that displays the value this field is
        // bound to.
        public ExampleField(string label) : base(label, new Label() { })
        {
            // This is the input element instantiated for the base constructor.
            m_Input = this.Q<Label>(className: inputUssClassName);
        }

        // SetValueWithoutNotify needs to be overridden by calling the base version and then making a change to the
        // underlying value be reflected in the input element.
        public override void SetValueWithoutNotify(double newValue)
        {
            base.SetValueWithoutNotify(newValue);

            m_Input.text = value.ToString("N");
        }
    }
}

在 UXML 文件中使用自定义控件

在该文件夹中，创建名为的 UI 文档。ExampleFieldExampleField.uxml

在文本编辑器中打开，并将其内容替换为以下内容：ExampleField.uxml

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:example="UIToolkitExamples">
    <example:ExampleField label="Binding Target" binding-path="m_Value" />
</ui:UXML>

3. 在 Unity 中，双击以在 UI 生成器中将其打开。示例字段显示在“层次结构”窗口中，并在视口中可视化。如果在“层次结构”窗口中选择“示例字段”，则“检查器”窗口将显示分配给“绑定路径”和“标签”框的值。ExampleField.uxml

为绑定目标创建类和自定义编辑器

在该文件夹中，创建一个名为的 C# 脚本，并将其内容替换为以下内容：ExampleFieldExampleFieldComponent.cs

using UnityEngine;

namespace UIToolkitExamples
{
    public class ExampleFieldComponent : MonoBehaviour
    {
        [SerializeField]
        double m_Value;
    }
}

2. 在该文件夹中，创建一个名为的文件夹。ExampleFieldEditor

3. 在该文件夹中，创建一个名为的 C# 脚本，并将其内容替换为以下内容：EditorExampleFieldCustomEditor.cs

using UnityEditor;
using UnityEngine.UIElements;
using UnityEngine;

namespace UIToolkitExamples
{
    [CustomEditor(typeof(ExampleFieldComponent))]
    public class ExampleFieldCustomEditor : Editor
    {
        [SerializeField]
        VisualTreeAsset m_Uxml;

        public override VisualElement CreateInspectorGUI()
        {
            var parent = new VisualElement();

            m_Uxml?.CloneTree(parent);

            return parent;
        }
    }
}

4. 在 Unity 中，在“项目”窗口中选择。ExampleFieldCustomEditor.cs

5. 拖到“检查器”窗口中的“Uxml”框中。ExampleField.uxml

测试示例

在 Unity 中，向场景添加一个空的游戏对象。
将组件添加到游戏对象。自定义控件将显示在检查器中，其默认值为绑定目标。如果更改基础双精度属性的值，UI 将反映该更改。ExampleFieldComponent0

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

上一篇：Unity3D ：创建径向进度指示器 (mvrlink.com)

下一篇：Unity3D ：为自定义控件创建自定义样式 (mvrlink.com)