Введение в визуальные элементы и визуальное дерево
Самым базовым строительным блоком в UI Toolkit является визуальный элемент. Визуальные элементы упорядочены в иерархическое дерево с родительско-дочерними отношениями. Это называется визуальным деревом.
На диаграмме ниже показан упрощенный пример визуального дерева и отображенный результат в UI Toolkit.
Корень на диаграмме представляет EditorWindow.rootVisualElement в Редакторе UI и UIDocument.rootVisualElement во время выполнения UI.
VisualElement класс является базовым для всех узлов визуального дерева. VisualElement базовый класс содержит такие свойства, как стили, данные компоновки и обработчики событий. У визуальных элементов могут быть дочерние элементы и потомки. Например, на схеме выше первый Box визуальный элемент имеет три дочерних визуальных элемента: Label, Checkbox, и Slider.
Вы можете настроить внешний вид визуальных элементов с помощью встроенных стилей и таблиц стилей. Вы также можете использовать обратные вызова событий для изменения поведения визуального элемента.
VisualElement разветвляется на подклассы, задающие дополнительное поведение и функциональность, — например, элементы управления. В UI Toolkit есть множество встроенных элементов управления со специализированным поведением. Элемент управления — это составная часть графического интерфейса. Например, в виде встроенных элементов управления доступны:
Управление включает в себя визуальный элемент управления и логику сценария для работы и взаимодействия с управлением. Оно может состоять из одного визуального элемента или комбинации нескольких визуальных элементов. Например, управление Toggle содержит три элемента:
- Текстовая метка
- Изображение коробки
- Изображение флажка
Реализация элемента управления Toggle задаёт его поведение. У него есть внутреннее значение — включён переключатель или нет. Эта логика переключает видимость изображения галочки при изменении значения.
Вы также можете комбинировать визуальные элементы и изменять их поведение, чтобы создать пользовательские элементы управления.
Чтобы использовать элемент управления в UI, добавьте его в визуальное дерево.