Создание связываемого настраиваемого контроля

Версия: 2023.2+

В этом примере показано, как создать связываемый пользовательский контроллер в пользовательском окне Редактора.

Примерный обзор

В этом примере создается пользовательский контроллер, привязанный к свойству с типом данных double. Вы можете адаптировать этот пример для привязки к свойствам с другими типами данных, такими как строка или целое число.

Вы можете найти завершенные файлы, созданные этим примером, в хранилище GitHub.

Предварительные условия

Это руководство предназначено для разработчиков, знакомых со скриптами Unity Editor, UI Toolkit и C#. Перед началом работы ознакомьтесь со следующим:

• UI Builder
• Визуальное дерево
• UXML
• SerializedObject привязка данных

Создание класса пользовательского элемента управления

Создайте класс C#, описывающий пользовательский элемент управления.

1. Создайте проект Unity с любым шаблоном.
2. Создайте папку ExampleField для хранения ваших файлов.
3. В папке ExampleField создайте скрипт C# с именем ExampleField.cs и замените его содержимое следующим:

using UnityEngine.UIElements;

namespace UIToolkitExamples
{
    // ExampleField inherits from BaseField with the double type. ExampleField's underlying value, then, is a double.
    [UxmlElement]
    public partial class ExampleField : BaseField<double>
    {
        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

1. В папке ExampleField создайте Документ UI с именем ExampleField.uxml.
2. Откройте ExampleField.uxml в текстовом редакторе и замените его содержимое следующим:

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

Создание класса для цели привязки

1. В Unity дважды щелкните ExampleField.uxml, чтобы открыть его в UI Builder. ExampleField отображается в окне Hierarchy и визуализирован в Viewport. Если вы выберете ExampleField в окне Hierarchy, окно Inspector покажет значения, назначенные полям Binding Path и Этикетка.
2. В папке ExampleField создайте скрипт C# с именем ExampleFieldComponent.cs и замените его содержимое следующим:

using UnityEngine;

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

Создание пользовательского редактора для конечного объекта привязки

1. В папке ExampleField создайте папку Editor.
2. В папке Editor создайте скрипт C# с именем ExampleFieldCustomEditor.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;
        }
    }
}

Проверка примера

1. В Unity выберите ExampleFieldCustomEditor.cs в окне Project.
2. Перетащите ExampleField.uxml в поле Uxml в окне Inspector.
3. Добавить пустой GameObject в сцену.
4. Добавьте компонент ExampleFieldComponent в GameObject. Пользовательский контроллер появляется в Inspector со значением по умолчанию 0 для Binding Target. Если вы измените значение базового свойства double, UI отразит это изменение.

Дополнительные ресурсы

• Индивидуальные управления