← Руководство

TreeView

Используйте TreeView для отображения иерархических данных в деревообразной структуре. Это мощный и гибкий контроллер, который обычно используется для представления данных с родительско-дочерними отношениями или вложенными структурами.

Если вам нужен простой список элементов (а не иерархическое дерево), рассмотрите возможность использования контроля ListView.

Создать TreeView

Вы можете создать TreeView с UI Builder, UXML и C#. Следующий пример C# создает TreeView:

var treeView = new TreeView();

Обновить представление коллекции

Чтобы обновить представление коллекции, вы можете вызвать либо RefreshItems/RefreshItem или Rebuild.

Как правило, вызов метода RefreshItems или RefreshItem — эти методы обновляют только представление коллекции и менее дорогостоящи. Если вызов метода Rebuild, представление коллекции полностью перестроено, что может быть дорогостоящим.

Однако вы должны вызвать Rebuild в следующих случаях:

Вы меняете тип источник данных, например при переходе от List<float> к а List<Vector3>.
Вы изменяете makeItem или destroyItem.

Привязать TreeView к данным

Вы можете связать TreeView с источником данных. Источником данных может быть список объектов или список строк.

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

treeView.makeItem = () => new VisualElement();

var item = new VisualElement();
treeView.bindItem = (item, i) =>
{
    var c = treeView.GetItemDataForIndex<MyCustomType>(i);
};

ПримечаниеВ предыдущем примере TreeView.bindItem Индекс. Вы должны использовать Индекс (а не ID) с GetItemDataForIndex<T>.

Реализация операций перетаскивания для TreeView

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

Чтобы включить перетаскивание элементов, переопределите canStartDrag.
Чтобы задать, какие элементы перетаскиваются, переопределите setupDragAndDrop.
Чтобы получать изменения статуса элементов, переопределите dragAndDropUpdate. Вы можете выполнять определенные действия на основе положения перетаскивания или других условий.
Чтобы управлять поведением перетаскивания, переопределите handleDrop.

Во время операции перетаскивания вы можете включить перестановку элементов путем перетаскивания. Чтобы включить эту функцию, установите атрибут reorderable на true в UI Builder, UXML и C#.

См. Создание списка перетаскивания и дерева представлений между окнами для примера.

Настройка иерархии TreeView

Чтобы установить иерархию TreeView, объявьте TreeViewItemData<T>, где T является типом данных для дерева, а затем установите источник через SetRootItems API.. Например, предположим, что у вас есть следующая структура UXML:

<UXML xmlns="UnityEngine.UIElements">
    <TreeView class="the-uxml-treeview" fixed-item-height="20" />
</UXML>

Следующий пример USS стилизует TreeView:

.the-uxml-treeview {
    height: 200px;
}

.unity-tree-view__item-content > .unity-label {
    flex-grow: 1;
    margin-top: 2px;
}

Вы можете настроить иерархию TreeView следующим образом:

var treeView = container.Q<TreeView>();
// Create some list of data, here simply numbers in a few foldouts
var items = new List<TreeViewItemData<string>>(10);
for (var i = 0; i < 10; i++)
{
    var itemIndex = i * 10 + i;

    var treeViewSubItemsData = new List<TreeViewItemData<string>>(10);
    for (var j = 0; j < 10; j++)
        treeViewSubItemsData.Add(new TreeViewItemData<string>(itemIndex + j + 1, $"Data {i+1}-{j+1}"));

    var treeViewItemData = new TreeViewItemData<string>(itemIndex, $"Data {i+1}", treeViewSubItemsData);
    items.Add(treeViewItemData);
};

// The "makeItem" function will be called as needed
// when the TreeView needs more items to render
Func<VisualElement> makeItem = () => new Label();

// As the user scrolls through the list, the TreeView object
// will recycle elements created by the "makeItem"
// and invoke the "bindItem" callback to associate
// the element with the matching data item (specified as an index in the list)
Action<VisualElement, int> bindItem = (e, i) =>
{
    var item = treeView.GetItemDataForIndex<string>(i);
    var id = treeView.GetIdForIndex(i);
    ((Label)e).text = $"ID {id} - {item}";
};

treeView.SetRootItems(items);
treeView.makeItem = makeItem;
treeView.bindItem = bindItem;
treeView.selectionType = SelectionType.Multiple;
treeView.Rebuild();

// Callback invoked when the user double clicks an item
treeView.itemsChosen += (selectedItems) =>
{
    Debug.Log("Items chosen: " + string.Join(", ", selectedItems));
};

// Callback invoked when the user changes the selection inside the TreeView
treeView.selectedIndicesChanged += (selectedIndices) =>
{
    var log = "IDs selected: ";
    foreach (var index in selectedIndices)
    {
        log += $"{treeView.GetIdForIndex(index)}, ";
    }
    Debug.Log(log.TrimEnd(',', ' '));
};

Чтобы попробовать этот пример в Unity, перейдите в Окно > UI Toolkit > Образцы.

TreeView FAQs

Ниже приведены некоторые часто задаваемые вопросы об управлении TreeView:

Могу ли я получить список строк, которые видны в представлении?

Для этого нет выделенных APIs. Вы можете использовать UQuery для получения интересующих элементов.

Обязательно ли для любой из переопределенных функций контроллера вида вызывать base.Method?

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

Я добавил Toggle в мою строку. Почему выбор не переходит в эту строку, когда пользователь выбирает его?

По умолчанию, строка выбирается только в том случае, если событие нажатия мыши не потребляется содержимым строки. В этом случае ваш Toggle останавливает распространение события. Чтобы исправить это, зарегистрируйте обратный вызов PointerDownEvent с TrickleDown на Toggle, чтобы вызвать SetSelection.

Как получить обратный вызов, когда пользователь изменяет свой выбор в представлении?

Рекомендуется использовать обратный вызов selectedIndicesChanged для получения данных по индексу, когда это необходимо. Хотя вы также можете использовать selectionChanged, помните, что он возвращает список объектов, что может привести к выделению блоков при использовании с типами значений.

Могу ли я получить индексы строк, которые видны на экране?

Для этого нет выделенного APIs. Вы можете использовать обратные вызова bindItem и unbindItem для отслеживания этих индексов в userData.

Как преобразовать ID в индекс и наоборот?

Используйте BaseTreeViewController.GetIndexForId и BaseTreeViewController.GetIdForIndex.

Могу ли я иметь горизонтальный TreeView?

Контроллер TreeView не поддерживает горизонтальное расположение и виртуализацию. Рекомендуется использовать ScrollView с flex-direction: row для горизонтального расположения элементов.

Примеры

Создание представлений списка и дерева: Используйте ListView, TreeView, MultiColumnListView и MultiColumnTreeView для создания представлений списка и дерева.
Создание перетаскиваемого списка и дерева представлений между окнами: Используйте ListView, TreeView и MultiColumnListView для создания перетаскиваемого UI между окнами.

Базовый класс C# и пространство имён

C# класс: TreeView
Пространство имен: UnityEngine.UIElements
Базовый класс: BaseTreeView

Атрибуты члена UXML

Этот элемент имеет следующие атрибуты члена:

Имя	Тип	Описание
`item-template`	`UIElements.VisualTreeAsset`	Шаблон UXML, который конструирует каждый переработанный и отброшенный элемент в дереве. Этот шаблон предназначен для замены определения `makeItem`.

Унаследованные атрибуты UXML

Этот элемент наследует от своего базового класса следующие атрибуты:

Имя	Тип	Описание
`auto-expand`	`boolean`	Если true, элементы автоматически разворачиваются при добавлении в TreeView.
`binding-path`	`string`	Путь к целевому свойству для привязки.
`fixed-item-height`	`float`	Высота отдельного элемента в списке, в пикселях. Это свойство должно быть установлено при использовании `virtualizationMethod`, значением которого является `FixedHeight`, для того, чтобы функционировало представление коллекции. Если это свойство установлено, когда `virtualizationMethod` является `DynamicHeight`, оно служит высотой по умолчанию для вычисления необходимого количества элементов и области прокрутки, прежде чем элементы будут расположены. Его следует установить на минимальную ожидаемую высоту элемента.
`focusable`	`boolean`	Если false, то элемент не может быть фокусирован. Элемент может быть фокусирован только в том случае, если его свойство canGrabFocus имеет значение true.
`horizontal-scrolling`	`boolean`	Это свойство определяет, показывает ли представление коллекции горизонтальную панель прокрутки, когда ее содержимое не вписывается в видимую область.
`reorderable`	`boolean`	Получает или устанавливает значение, указывающее, может ли пользователь перетаскивать элементы списка для изменения их порядка. Значение по умолчанию — `false`, которое позволяет пользователю перетаскивать элементы в другие представления и из них при реализации `canStartDrag`, `setupDragAndDrop`, `dragAndDropUpdate`и `handleDrop`. Установите это значение на `true`, чтобы разрешить пользователю изменять порядок элементов в списке.
`selection-type`	`UIElements.SelectionType`	Управляет типом выбора. Значение по умолчанию — `SelectionType.Single`. При отключении выбора в представлении коллекции любой текущий выбор удаляется.
`show-alternating-row-backgrounds`	`UIElements.AlternatingRowBackground`	Это свойство определяет, будут ли цвета фона строк представления коллекции чередоваться. `AlternatingRowBackground` enum.
`show-border`	`boolean`	Включите это свойство для отображения границы вокруг представления коллекции. Если установлено значение true, то вокруг ScrollView, используемого внутри представления коллекции, отображается граница.
`tabindex`	`int`	Целое число, используемое для сортировки фокусируемых элементов в кольце фокуса. Должно быть больше или равно нулю. Установка значения `tabIndex` меньше `0` (например, `−1`) удаляет элемент из кольца фокуса и навигации по вкладкам.
`virtualization-method`	`UIElements.CollectionVirtualizationMethod`	Метод виртуализации, который будет использоваться для этой коллекции, когда видна полоса прокрутки. Принимает значение из `CollectionVirtualizationMethod` enum. Значение по умолчанию `FixedHeight`. При использовании фиксированной высоты указать `fixedItemHeight` Фиксированная высота более эффективна, но предлагает меньше гибкости в отношении содержания. `DynamicHeight`, коллекция будет ждать вычисления фактической высоты. Динамическая высота более гибкая, но менее эффективная.

Этот элемент также наследует следующие атрибуты от VisualElement:

Имя	Тип	Описание
`content-container`	`string`	Логический контейнер, в который добавляются дочерние элементы. Если к этому элементу добавляется дочерний элемент, то он добавляется в контейнер содержимого этого элемента. При итерации над `VisualElement.Children` При использовании элемента вместо самого элемента используется иерархия контейнера содержимого элемента. Это может привести к неожиданным результатам, например, к игнорированию элементов событиями навигации, если они не находятся непосредственно в иерархической структуре контейнера. См. `IFocusRing` для больше информации. Если контейнер содержимого совпадает с самим элементом, то дочерние элементы добавляются непосредственно к элементу. Это верно для большинства элементов, но может быть переопределено более сложными типами. `ScrollView`, например, имеет контейнер содержимого, отличающийся от самого себя. В этом случае дочерние элементы, добавленные к представлению прокрутки, добавляются вместо этого к его элементу контейнера содержа-`VisualElement.Hierarchy.parent`) дочерних элементов является элементом контейнера содержимого прокрутки, их логическим родителем (`VisualElement.parent`Поскольку некоторые фокусируемые дочерние объекты представления прокрутки не являются частью его логической иерархии, такие как его `Scroller` элементов, эти фокусируемые дочерние элементы не рассматриваются по умолчанию при использовании последовательной навигации. Как я могу изменить, какой элемент будет фокусироваться дальше для примера решения, если правила навигации по умолчанию не соответствуют вашим потребностям.
`data-source`	`Object`	Назначает источник данных этому VisualElement, который переопределяет любой унаследованный источник данных. Этот источник данных наследуется всеми дочерними объектами.
`data-source-path`	`string`	Путь от источника данных к значению.
`data-source-type`	`System.Type`	Возможный тип источника данных, присваиваемый этому VisualElement. Эта информация используется UI Builder только как подсказка для определенного заполнения поля пути источника данных, когда эффективный источник данных не может быть указан во время проектирования.
`enabled`	`boolean`	Возвращает true, если `VisualElement` разрешен локально. Этот флаг не изменяется, если VisualElement имплицитно отключен одним из родителей. Чтобы проверить это, используйте `enabledInHierarchy`.
`language-direction`	`UIElements.LanguageDirection`	Указывает направленность текста элемента. Значение будет распространяться на дочерей элемента. Установка `languageDirection` на `RTL` может получить только базовую поддержку RTL, такую как инверсия текста. Чтобы получить более полную поддержку RTL, такую как перерыв строки, перенос слов или формирование текста, вы должны включить Усовершенствованный текстовый генератор.
`name`	`string`	Имя этого VisualElement. Используйте это свойство для написания селекторов USS, которые нацелены на определенный элемент. Стандартная практика заключается в том, чтобы дать элементу уникальное имя.
`picking-mode`	`UIElements.PickingMode`	Определяет, может ли этот элемент быть целью событий указателя или выбран `IPanel.Pick` запросов. Элементы не могут быть выбраны, если: - Они невидимы. `style.display` установлен на `DisplayStyle.None` Элементы с режимом подбора `PickingMode.Ignore` никогда не получать псевдо-state.
`style`	`string`	Задает значения стиля на `VisualElement`. Возвращаемые данные стиля, рассчитанные из USS файлы или встроенные стили, записанные в этот объект в C#, не представляет полностью разрешенные стили, такие как окончательная высота и ширина VisualElement. Чтобы получить доступ к этим полностью разрешенным стилям, используйте `resolvedStyle`. Дополнительные сведения об использовании этого свойства и всех поддерживаемых USS свойства, см. Применить стили в C# сценарии и USS ссылка на свойства страницы руководства.
`tooltip`	`string`	Текст, который будет отображаться внутри информационного поля после того, как пользователь задержится над элементом небольшое время. Это поддерживается только в Редакторе UI.
`usage-hints`	`UIElements.UsageHints`	Комбинация значений подсказки, которые указывают высокоуровневые предполагаемые схемы использования для `VisualElement`. Это свойство может быть установлено только тогда, когда `VisualElement` еще не является частью `Panel`. Как только оно становится частью `Panel`, это свойство становится эффективно только для чтения, и попытки изменить его будут вызывать исключение. Указание правильного `UsageHints` заставляет систему принимать более правильные решения о том, как обрабатывать или ускорять определенные операции на основе предполагаемой схемы использования. Обратите внимание, что эти подсказки не влияют на поведение или визуальные результаты, а только влияют на общую производительность панели и элементов внутри нее. Рекомендуется всегда рассматривать возможность указания правильного `UsageHints`, но помните, что некоторые `UsageHints` могут быть внутренне проигнорированы при определенных условиях (e.g. из-за аппаратных ограничений на целевой платформе).
`view-data-key`	`string`	Используется для устойчивости данных представления, таких как развернутые состояния дерева, положение прокрутки или уровень масштаба. Этот ключ используется для сохранения и загрузки данных представления из хранилища данных представления. Если этот ключ не установлен, устойчивость отключена для связанного `VisualElement`. Дополнительные сведения см. в разделе Устойчивость данных представления в руководстве Unity.

Классы USS

В таблице ниже перечислены все открытые имена свойств C# и связанные с ними селекторы USS.

C# собственность	USS выбор	Описание
`ussClassName`	`.unity-tree-view`	Имя USS-класса для элементов TreeView. Unity добавляет этот USS-класс к каждому экземпляру элемента TreeView. Любые стили, применённые к этому классу, влияют на все TreeView, расположенные рядом с таблицей стилей или ниже неё в визуальном дереве.
`itemUssClassName`	`.unity-tree-view__item`	Имя USS-класса для элементов списка TreeView. Unity добавляет этот USS-класс к каждому элементу списка в TreeView. Любые стили, применённые к этому классу, влияют на все элементы, расположенные рядом с таблицей стилей или ниже неё в визуальном дереве.
`itemToggleUssClassName`	`.unity-tree-view__item-toggle`	Имя USS-класса для элементов-переключателей списка TreeView. Unity добавляет этот USS-класс к каждому элементу-переключателю в TreeView. Любые стили, применённые к этому классу, влияют на все элементы, расположенные рядом с таблицей стилей или ниже неё в визуальном дереве.
`itemIndentsContainerUssClassName`	`.unity-tree-view__item-indents`	Имя USS-класса для элементов-контейнеров отступа TreeView. Unity добавляет этот USS-класс к каждому элементу-контейнеру отступа в TreeView. Любые стили, применённые к этому классу, влияют на все элементы, расположенные рядом с таблицей стилей или ниже неё в визуальном дереве.
`itemIndentUssClassName`	`.unity-tree-view__item-indent`	Имя USS-класса для элемента отступа TreeView. Unity добавляет этот USS-класс к каждому элементу отступа в TreeView. Любые стили, применённые к этому классу, влияют на все элементы, расположенные рядом с таблицей стилей или ниже неё в визуальном дереве.
`itemContentContainerUssClassName`	`.unity-tree-view__item-content`	Имя USS-класса для элементов-контейнеров списка TreeView. Unity добавляет этот USS-класс к каждому элементу-контейнеру элементов в TreeView. Любые стили, применённые к этому классу, влияют на все элементы, расположенные рядом с таблицей стилей или ниже неё в визуальном дереве.
`ussClassName`	`.unity-collection-view`	Имя USS-класса для элементов BaseVerticalCollectionView. Unity добавляет этот USS-класс к каждому экземпляру элемента BaseVerticalCollectionView. Любые стили, применённые к этому классу, влияют на все BaseVerticalCollectionView, расположенные рядом с таблицей стилей или ниже неё в визуальном дереве.
`borderUssClassName`	`.unity-collection-view--with-border`	Имя USS-класса для элементов BaseVerticalCollectionView с рамкой. Unity добавляет этот USS-класс к экземпляру элемента BaseVerticalCollectionView, если у этого экземпляра свойство `BaseVerticalCollectionView.showBorder` имеет значение true. Любые стили, применённые к этому классу, влияют на все такие BaseVerticalCollectionView, расположенные рядом с таблицей стилей или ниже неё в визуальном дереве.
`itemUssClassName`	`.unity-collection-view__item`	Имя USS-класса для элементов списка в элементах BaseVerticalCollectionView. Unity добавляет этот USS-класс к каждому элементу списка, содержащемуся в BaseVerticalCollectionView. Любые стили, применённые к этому классу, влияют на все элементы списка, расположенные рядом с таблицей стилей или ниже неё в визуальном дереве.
`dragHoverBarUssClassName`	`.unity-collection-view__drag-hover-bar`	Имя USS-класса для полосы наведения при перетаскивании. Unity добавляет этот USS-класс к полосе, которая появляется, когда пользователь перетаскивает элемент списка. Любые стили, применённые к этому классу, влияют на все элементы BaseVerticalCollectionView, расположенные рядом с таблицей стилей или ниже неё в визуальном дереве.
`dragHoverMarkerUssClassName`	`.unity-collection-view__drag-hover-marker`	Имя USS-класса для круглого маркера наведения при перетаскивании, обозначающего глубину. Unity добавляет этот USS-класс к полосе, которая появляется, когда пользователь перетаскивает элемент списка. Любые стили, применённые к этому классу, влияют на все элементы BaseVerticalCollectionView, расположенные рядом с таблицей стилей или ниже неё в визуальном дереве.
`itemDragHoverUssClassName`	`.unity-collection-view__item--drag-hover`	Имя USS-класса, применяемое к элементу списка при наведении перетаскиваемого объекта. Unity добавляет этот USS-класс к элементу списка, когда его перетаскивают. Любые стили, применённые к этому классу, влияют на все элементы BaseVerticalCollectionView, расположенные рядом с таблицей стилей или ниже неё в визуальном дереве.
`itemSelectedVariantUssClassName`	`.unity-collection-view__item--selected`	Имя USS-класса для выбранных элементов списка в BaseVerticalCollectionView. Unity добавляет этот USS-класс к каждому выбранному элементу в BaseVerticalCollectionView. Свойство `BaseVerticalCollectionView.selectionType` определяет, можно ли выбрать ноль, один или несколько элементов. Любые стили, применённые к этому классу, влияют на все элементы BaseVerticalCollectionView, расположенные рядом с таблицей стилей или ниже неё в визуальном дереве.
`itemAlternativeBackgroundUssClassName`	`.unity-collection-view__item--alternative-background`	Имя USS-класса для нечётных строк в BaseVerticalCollectionView. Unity добавляет этот USS-класс к каждому нечётному элементу в BaseVerticalCollectionView, когда свойство `BaseVerticalCollectionView.showAlternatingRowBackgrounds` свойство установлено на `ContentOnly` или `All`. Когда `showAlternatingRowBackgrounds` имеет одно из этих значений, нечётные элементы отображаются с иным цветом фона, чем чётные. Этот USS-класс служит для того, чтобы отличать нечётные элементы от чётных. Когда свойство `showAlternatingRowBackgrounds` свойство установлено на `None`, USS-класс не добавляется, и любые стили или поведение, которые на него опираются, становятся недействительными.
`listScrollViewUssClassName`	`.unity-collection-view__scroll-view`	Имя USS-класса для области прокрутки в BaseVerticalCollectionView. Unity добавляет этот USS-класс к области прокрутки BaseVerticalCollectionView. Любые стили, применённые к этому классу, влияют на все области прокрутки BaseVerticalCollectionView, расположенные рядом с таблицей стилей или ниже неё в визуальном дереве.
`disabledUssClassName`	`.unity-disabled`	Имя USS-класса для локально отключённых элементов.

Вы также можете использовать раздел Соответствующие селекторы в отладчике Inspector или UI Toolkit, чтобы увидеть, какие селекторы USS влияют на компоненты VisualElement на каждом уровне его иерархии.