Unity 6.3
0 онлайн 101 гостей 3 в системе
Вход
UI системы Шаг 211 из 317

Начало работы с привязкой времени выполнения

Версия: 6000.0+

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

Чтобы установить привязку времени выполнения в UI Builder:

  1. Определить источник данных и путь к источнику данных в панели Inspector управления UI.
  2. Привязать свойства элемента управления UI к свойствам ассета источника данных.
  3. Определить режим связывания для настройки способа репликации изменений между источником данных и UI.
  4. Определить триггер обновления настроить, когда изменения реплицируются между источником данных и UI.

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

В этом примере создается ассет источника данных, содержащий строковое свойство, и привязывается к свойству Text элемента управления Label в UI Builder. При изменении строкового свойства в ассете источника данных изменяется текст метки.

Пример привязки времени выполнения
Пример привязки времени выполнения

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

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

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

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

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

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

#if UNITY_EDITOR
using UnityEditor;
#endif

[CreateAssetMenu]
public class ExampleObject : ScriptableObject
{
    [Header("Simple binding")]
    [CreateProperty]
    public string simpleLabel = "Hello World!";
}

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

  1. В меню выберите Активы > Создать > Пример объекта. Это создает ассет в Assets папка проекта.
  2. Переименуйте ассет в ExampleObject.asset.

Создать UI

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

  1. В папке Assets проекта создайте файл UXML с именем ExampleObject.uxml.
  2. Дважды щелкните файл ExampleObject.uxml, чтобы открыть его в UI Builder.
  3. В панели Hierarchy добавьте элемент управления Этикетка.

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

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

  1. В течение Inspector группы экспертов Этикетка, от Привязки > Источник данных > Объект список, выбор ExampleObject.

  2. В течение Путь к источнику данных список, выбор simpleLabel.

    Установка источника данных привязки VisualElement

  3. Щелкните правой кнопкой мыши свойство Текст и выберите Добавить привязку.

    Добавить привязку

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

  5. Из списка Дополнительные настройки > Триггер обновления выберите При изменении источника, что является параметром по умолчанию. Это обновляет UI при изменении источника данных.

    Установка режима привязки и триггера обновления

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

  7. Сохраните и закройте UI Builder. Ваш файл ExampleObject.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:Label text="Label" data-source="ExampleObject.asset" data-source-path="simpleLabel">
        <Bindings>
            <engine:DataBinding property="text" binding-mode="ToTarget" />
        </Bindings>
    </engine:Label>
</engine:UXML>

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

Обновить текст метки в ассете источника данных и проверить изменения, реплицируемые в UI.

  1. В папке Assets проекта выберите ExampleObject.asset.
  2. В окне Inspector в поле Simple Label введите текст. Текст Этикетка в окне UI Builder Viewport отображает введенный вами текст.

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