Визуализация деревьев

Самый основной стандартный блок в UI(пользовательский интерфейс). Позволяет пользователю взаимодействовать с вашим приложением. Подробнее
См. в Словарь Инструментарий — это визуальный элемент. Визуальные элементы упорядочены в иерархическом дереве с отношениями родитель-потомок. На приведенной ниже диаграмме показан упрощенный пример дерева иерархии и результат визуализации в UI Toolkit.

Визуальные элементы

Класс VisualElement является базовым для всех узлов визуального дерева. Базовый класс VisualElement содержит общие свойства для всех элементов управления, например стили, данные макета и обработчики событий. Визуальные элементы могут иметь дочерние элементы и визуальные элементы-потомки. Например, на диаграмме выше первый визуальный элемент Box имеет три дочерних визуальных элемента: Label, Флажок и Ползунок.

Вы можете настроить внешний вид визуальных элементов с помощью таблиц стилей. Вы также можете использовать обратные вызовы событий для изменения поведения визуального элемента.

VisualElement является производным от подклассов, определяющих дополнительное поведение и функциональные возможности, например элементы управления. UI Toolkit включает множество встроенных элементов управления со специальным поведением. Например, в качестве встроенных элементов управления доступны следующие элементы:

• Buttons
• Toggles
• Text input fields

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

Панели

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

Каждый элемент в визуальном дереве содержит прямую ссылку на панель, содержащую визуальное дерево. Чтобы проверить подключение VisualElement к панели, вы можете протестировать свойство panel этого элемента. Если визуальный элемент не подключен, тест возвращает null.

Порядок отрисовки

Порядок прорисовки элементов в визуальном дереве соответствует поиску в глубину. Дочерние визуальные элементы появляются поверх родительских элементов. Дочерние элементы также рисуются в порядке списка братьев и сестер. Порядок розыгрыша следующий:

1. Верхний визуальный элемент.
2. Первый дочерний элемент этого визуального элемента.
3. Дочерние элементы элемента-потомка.

На диаграмме ниже показан порядок прорисовки предыдущего примера:

Чтобы изменить порядок прорисовки визуальных элементов, используйте следующие функции:

• BringToFront()
• SendToBack()

Для родственных визуальных элементов используйте следующее:

• PlaceBehind()
• PlaceInFront()

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

UI Toolkit использует мощную систему компоновки, которая автоматически вычисляет положение и размер отдельных элементов на основе параметров компоновки в свойствах их стиля. Дополнительную информацию см. на странице Layout Engine.

UI Toolkit имеет два типа координат:

• Относительно: координаты относительно расчетного положения элемента. Система компоновки вычисляет положение элемента, а затем добавляет координаты в качестве смещения. Дочерние элементы могут влиять на положение родительского элемента, поскольку механизм компоновки учитывает их при расчете положения элемента.
• Абсолютный: координаты относительно родительского элемента. Это позволяет обойти автоматический расчет макета и напрямую установить положение элемента. Дочерние элементы одного и того же родителя не влияют на положение элемента. Точно так же этот элемент не влияет на положение и размер других одноуровневых элементов того же родителя.

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

В следующем коде показано, как задать пространство координат и положение визуального элемента с помощью кода:

var newElement = new VisualElement(); newElement.style.position = Position.Relative; newElement.style.left = 15; newElement.style.top = 35;

Началом элемента является его верхний левый угол.

Система макета вычисляет свойство VisualElement.layout (тип Rect) для каждого элемента, которое включает конечную позицию элемент. При этом учитывается относительное или абсолютное положение элемента.

layout.position выражается в точках относительно координатного пространства его родителя.

Каждый VisualElement имеет свойство преобразования (ITransform), которое можно использовать для добавления дополнительного локального смещения к положению и повороту. элемента. Смещение не представлено в вычисляемом свойстве макета. По умолчанию transform является идентификатором.

Используйте свойство worldBound, чтобы получить окончательные координаты оконного пространства VisualElement с учетом положения макета и преобразование. Эта позиция включает высоту заголовка окна.

Пример

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

Чтобы увидеть этот пример в действии, сделайте следующее:

1. В разделе Ресурсы > Сценарии > Редактор создайте сценарий C# с именем PositioningTestWindow.
2. Скопируйте приведенный ниже код в сценарий C#.
3. На панели инструментов редактора выберите Окно > Набор инструментов пользовательского интерфейса > Окно проверки позиционирования.

using UnityEditor; using UnityEngine; using UnityEngine.UIElements; public class PositioningTestWindow : EditorWindow { [MenuItem("Window/UI Toolkit/Positioning Test Window")] public static void ShowExample() { var wnd = GetWindow(); wnd.titleContent = new GUIContent("Positioning Test Window"); } public void CreateGUI() { for (int i = 0; i < 2; i++) { var temp = new VisualElement(); temp.style.width = 70; temp.style.height = 70; temp.style.marginBottom = 2; temp.style.backgroundColor = Color.gray; rootVisualElement.Add(temp); } // Relative Positioning var relative = new Label("Relative\nPos\n25, 0"); relative.style.width = 70; relative.style.height = 70; relative.style.left = 25; relative.style.marginBottom = 2; relative.style.backgroundColor = new Color(0.2165094f, 0, 0.254717f); rootVisualElement.Add(relative); for (int i = 0; i < 2; i++) { var temp = new VisualElement(); temp.style.width = 70; temp.style.height = 70; temp.style.marginBottom = 2; temp.style.backgroundColor = Color.gray; rootVisualElement.Add(temp); } // Absolute Positioning var absolutePositionElement = new Label("Absolute\nPos\n25, 25"); absolutePositionElement.style.position = Position.Absolute; absolutePositionElement.style.top = 25; absolutePositionElement.style.left = 25; absolutePositionElement.style.width = 70; absolutePositionElement.style.height = 70; absolutePositionElement.style.backgroundColor = Color.black; rootVisualElement.Add(absolutePositionElement); } }

Преобразование между системами координат

Свойства VisualElement.layout.position и VisualElement.transform определяют способ преобразования между локальной системой координат и родительской система координат.

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

• WorldToLocal преобразует Vector2 или Rect из Panel до ссылки внутри элемента.
• LocalToWorld преобразует Vector2 или Rect в Панель ссылка на пробел.
• ChangeCoordinatesTo преобразует Vector2 или Rect из локального пространства одного элемента в локальное пространство другого.