Привязка к нескольким свойствам с помощью привязки времени выполнения

Версия: 6000.0+

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

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

В этом примере создается ассет источника данных, содержащий свойство Vector3 и свойство float. Свойство float является свойством только для чтения, которое возвращает сумму значений x, yи z свойства Vector3. В примере свойство Vector3 привязано к свойству Vector3Field, а свойство float к свойству FloatField. При изменении свойства Vector3 в свойстве UI, FloatField отображает сумму значений x, yи z свойства Vector3.

В этом примере также показано, как использовать режим привязки To Source для обновления источника данных при изменении пользовательского интерфейса.

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

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

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

• UI Builder
• UXML

Создание ассета источника данных

Создайте ассет источника данных, содержащий свойства, к которым требуется установить привязку.

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

using Unity.Properties;
using UnityEngine;
using UnityEngine.UIElements;

#if UNITY_EDITOR
using UnityEditor;
#endif

[CreateAssetMenu]
public class ExampleMultiPropertiesObject : ScriptableObject
{
    [Header("Bind to multiple properties")]

    [CreateProperty]
    public Vector3 vector3Value;
    
    [CreateProperty]
    public float sumOfVector3Properties => vector3Value.x + vector3Value.y + vector3Value.z;
}

Создание примера ассета объекта

1. Выберите Ассеты > Создать > Пример MultiProperties Объект. Это создает ассет источника данных в папке Assets вашего проекта.
2. Переименуйте ассет в ExampleMultiPropertiesObject.asset.

Создать UI

Создайте файл UI, который связывается с ассетом источника данных, созданным на предыдущем шаге. В этом примере создается файл UXML, содержащий файл VisualElement с дочерними элементами Vector3Field и FloatField.

1. В папке Assets проекта создайте файл UXML с именем ExampleMultiPropertiesObject.uxml.
2. Дважды щелкните файл ExampleMultiPropertiesObject.uxml, чтобы открыть его в UI Builder.
3. В панели Hierarchy добавьте VisualElement.
4. Добавить Vector3Field и FloatField в качестве дочерних элементов VisualElement.

Привязать Vector3Field к источнику данных

Привязать UI к ассету источника данных, созданному на предыдущем шаге.

1. В панели Inspector панели VisualElementиз списка Привязки > Источник данных > Объект выберите ExampleMultiPropertiesObject.

2. В течение Inspector группы экспертов Vector3Field, щелкните правой кнопкой Стоимость свойство и выбрать Добавить привязку.

3. В течение Добавить привязку окно, выбрать vector3Value от Путь к источнику данных лист.

4. Из Режим привязки список, выбор ИсточникЭто обновляет источник данных, когда UI изменения.

   

5. Выберите Добавить привязку, чтобы применить изменения.

Привязать FloatField к источнику данных

Привязать свойство value объекта FloatField к свойству sumOfVector3Properties объекта источника данных.

1. В течение Inspector группы экспертов Поплавок, щелкните правой кнопкой Стоимость свойство и выбрать Добавить привязку.
2. В течение Добавить привязку окно, из Путь к источнику данных список, выбор sumOfVector3Properties.
3. Из Режим привязки список, выбор На цель. Это обновляет UI при изменении источника данных.
4. Выберите Добавить привязку, чтобы применить изменения.
5. Сохраните и закройте UI Builder. Ваш файл ExampleMultiPropertiesObject.uxml выглядит следующим образом:

<engine:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:engine="UnityEngine.UIElements" xmlns:editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <engine:VisualElement data-source="MulPropertyObject.asset" name="VisualElement" style="flex-grow: 1;">
        <engine:Vector3Field label="Vec3 Field">
            <Bindings>
                <engine:DataBinding property="value" data-source-path="vector3Value" binding-mode="ToSource"/>
            </Bindings>
        </engine:Vector3Field>
        <engine:FloatField label="Float Field" name="FloatField">
            <Bindings>
                <engine:DataBinding property="value" data-source-path="sumOfVector3Properties" binding-mode="ToTarget"/>
            </Bindings>
        </engine:FloatField>
    </engine:VisualElement>
</engine:UXML>

Проверка привязки в режиме предварительного просмотра UI Builder

Чтобы проверить привязку в UI Builder, обновите значение свойства Vector3. Если привязка настроена правильно, значения реплицируются в ассете источника данных.

1. В окне просмотра UI Builder выберите Предварительный просмотр.
2. Введите произвольные числа в поля X, Y и Z элемента Vector3Field. Элемент FloatField отображает сумму введённых чисел.
3. В папке Assets вашего проекта выберите файл ExampleMultiPropertiesObject.asset. Значение Vector3 в окне Inspector ExampleObject.asset изменится на числа, которые вы ввели.

Примечание:

• Если вы не можете ввести числа в Vector3Field, сделайте поле шире, перетаскивая правый край холста.
• Для устранения неполадок привязки включите журнал привязки данных времени выполнения.

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

• Начало работы с привязкой данных во время выполнения
• Создание конвертера типа привязки времени выполнения
• Создать привязку данных времени выполнения
• Определение источника данных