← UI системы Шаг 220 из 317

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

Версия: 6000.0+

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

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

В этом примере создается контрольная метка в UI Builder, которая привязывается к ресурсу источника данных. Ресурс источника данных содержит свойство с плавающей запятой dangerLevel. Метка отображает dangerLevel в качестве строки и изменяет цвет фона в зависимости от значения dangerLevel.

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

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

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

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

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

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

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

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

#if UNITY_EDITOR
using UnityEditor;
#endif

[CreateAssetMenu]
public class ExampleConverterObject : ScriptableObject
{
#if UNITY_EDITOR
    [InitializeOnLoadMethod]
#else
    [RuntimeInitializeOnLoadMethod(RuntimeInitializeLoadType.SubsystemRegistration)]
#endif
    public static void RegisterConverters()
    {
    
        // Create local Converters.
        var group = new ConverterGroup("Value To Progress");
    
        // Converter groups can have multiple converters. This example converts a float to both a color and a string.
        group.AddConverter((ref float v) => new StyleColor(Color.Lerp(Color.red, Color.green, v)));
        group.AddConverter((ref float value) =>
        {
            return value switch
            {
                >= 0 and < 1.0f/3.0f => "Danger",
                >= 1.0f/3.0f and < 2.0f/3.0f => "Neutral",
                _ => "Good"
            };
        });
    
        // Register the converter group in InitializeOnLoadMethod to make it accessible from the UI Builder.
        ConverterGroups.RegisterConverterGroup(group);
    }
    
    [Header("Binding using a converter group")]
    [Range(0, 1)] public float dangerLevel;
}

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

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

Создать UI

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

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

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

Привязать свойства метки к свойствам ассета источника данных и применить конвертер типов для метки.

В течение Hierarchy панели, выберите Этикетка.
В панели Inspector из списка Привязки > Источник данных > Объект выберите ExampleConverterObject.
Из Путь к источнику данных список, выбор dangerLevel.
В панели Inspector щелкните правой кнопкой мыши поле Текст и выберите Добавить привязку.
В окне Добавить привязку выполните следующие действия:
- Из Режим привязки список, выбор На цель. Это обновляет UI при изменении источника данных.
- Из списка Дополнительные настройки > Локальные конвертер > Для назначения свойства (UI), выберите Значение для прогресса. Это преобразует float в строку.
Выберите Добавить привязку, чтобы применить изменения.
В панели Inspector разверните поле 1. Справочная информация.
Щелкните правой кнопкой мыши свойство Цвет и выберите Добавить привязку.
В окне Добавить привязку выполните следующие действия:
- Из Режим привязки список, выбор На цель. Это обновляет UI при изменении источника данных.
- Из списка Дополнительные настройки > Локальные преобразователи > Для целевой свойства (UI), выберите Значение к прогрессу. Это преобразует float в цвет.
Выберите Добавить привязку, чтобы применить изменения.

Сохраните и закройте UI Builder. Ваш файл ExampleConverterObject.uxml выглядит следующим образом:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" 
engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <ui:Label text="Label" data-source="ExampleConverterObject.asset" data-source-path="dangerLevel">
        <Bindings>
            <ui:DataBinding property="style.backgroundColor" binding-mode="ToTarget" source-to-ui-converters="Value To Progress" />
            <ui:DataBinding property="text" binding-mode="ToTarget" source-to-ui-converters="Value To Progress" />
        </Bindings>
    </ui:Label>
</ui:UXML>

Проверка привязки

В течение Inspector окно ExampleObject.asset, переместить Уровень опасности слайдер. Текст и цвет фона на панели Этикетка в 2000 году UI Builder Изменение поля зрения в зависимости от значения Уровень опасности.

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

← Предыдущий шагПривязка к нескольким свойствам с помощью привязки времени выполнения Следующий шаг →Создание пользовательской привязки для привязки селекторов USS