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

Применение стилей в C# скриптах

Вы можете записать в style для установки значений стилей для элемента. Однако, чтобы получить фактически отображаемые стили элемента, читайте из resolvedStyle.

Набор стилей

В сценарии C# вы можете установить стили непосредственно в свойствах style визуального элемента. Например, следующий код устанавливает цвет фона кнопки на красный:

button.style.backgroundColor = Color.red

Примечание: Установка свойства, такого как backgroundColor, является прямой инструкцией. Свойства, связанные с макетом, такие как top, left, widthи height, рассчитываются движком макета, который учитывает таблицы стилей, родительские свойства и наследование. Чтобы получить фактические отображаемые значения стилей для элемента, вы должны прочитать из свойства resolvedStyle, доступного только для чтения.

Вы также можете добавить таблицу стилей Unity (USS) к любому визуальному элементу. Unity представляет файлы USS как объекты StyleSheet в скриптах C#.

Чтобы добавить таблицы стилей к визуальному элементу:

Загрузить объекты StyleSheet со стандартными Unity APIs, такими как AssetDatabase.Load() или Resources.Load().
Используйте свойство styleSheets визуального элемента для добавления объекта StyleSheet.

Например, если таблица стилей находится в локальной переменной styleSheet, а элемент находится в локальной переменной element, следующий пример добавляет таблицу стилей к элементу:

element.styleSheets.Add(styleSheet);

Примечание: Правила стиля применяются к визуальному элементу и всем его потомкам, но не применяются к родителю или братьям элемента. Любое изменение в USS файл автоматически обновляет UI использует данную таблицу стилей.

Получить разрешенные стили

Значения стиля элемента вычисляются из различных источников, включая множество применённых классов, наследование от предшественников и встроенные стили из UXML или C# кода. Эти значения могут меняться от кадра к кадру. style содержит только встроенные стили для элемента и не отражает другие источники. resolvedStyle содержит окончательные вычисленные значения, учитывающие все источники на текущем кадре.

Например, когда вы используете встроенный стиль для установки высоты элемента, как style и resolvedStyle когда элемент добавляется в иерархию, он должен иметь одинаковое значение. resolvedStyle.height может быть NaN пока не обновится раскладка. Если вы задаёте высоту в классе в процентах, вычисленная ширина зависит от свойств родителя, таких как border-height и padding. Хотя style.height может дать относительное значение, например для переходов, которые могут изменить значение, resolvedStyle.height дает фактическую отображаемую высоту.

Чтобы получить разрешенный стиль при изменении геометрии, вы можете использовать событие GeometryChangedEvent. Это событие запускается при изменении макета VisualElement, включая изменения размера и положения. Вы можете зарегистрировать обратный вызов для этого события, и в обратном вызове вы можете получить доступ к свойству resolvedStyle VisualElement для получения окончательных вычисленных стилей.

В следующем примере создается пользовательское окно Редактора и регистрируется разрешенная высота элемента. Высота элемента изменяется при изменении размера окна:

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class ResolvedStyles : EditorWindow
{
    [MenuItem("Window/UI Toolkit/ResolvedStyles")]
    public static void ShowExample()
    {
        GetWindow<ResolvedStyles>();
    }
    
    private void OnEnable()
    {
        titleContent = new GUIContent("Resolved Styles");
    }

    public void CreateGUI()
    {
        VisualElement root = rootVisualElement;
        
        // Element that is tracked.
        // When you resize the Editor window, the inner content is not necessarily updated
        // during the drag operation. The resolved height field is updated whenever the drag
        // operation is complete.
        var element = new VisualElement
        {
            style =
            {
                flexGrow = 1,
                backgroundColor = Color.red
            }
        };
        root.Add(element);

        // Register a callback for the GeometryChangedEvent
        element.RegisterCallback<GeometryChangedEvent>(OnGeometryChanged);
    }

    // Callback for the GeometryChangedEvent
    public void OnGeometryChanged(GeometryChangedEvent evt)
    {
        // Get the VisualElement that triggered the event
        VisualElement element = evt.target as VisualElement;

        // Get the resolved style of the VisualElement
        float height = element.resolvedStyle.height;

        // Log the resolved of the VisualElement
        Debug.Log("Resolved height: " + height);
    }
}

Если геометрия элемента не изменяется, вы можете добавить планировщик для периодической проверки разрешенного стиля элемента:

element.schedule.Execute(() =>
{
    Debug.Log(element.resolvedStyle.height);
}).Every(100);

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

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