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

MultiColumnTreeView

MultiColumnTreeView — это UI элемент управления, обычно используемый для отображения табличных или сетчатых данных с несколькими столбцами. Используйте MultiColumnTreeView для представления данных в структурированном формате, где каждая строка представляет элемент или запись, а каждый столбец представляет определенный атрибут или свойство этого элемента.

Создать MultiColumnTreeView

Вы можете создать MultiColumnTreeView с UXML и C#. Следующий пример C# создает MultiColumnTreeView с двумя столбцами:

var multiColumnTreeView = new MultiColumnTreeView();
multiColumnTreeView.columns.Add(new Column { title = "Name", width = 20 });
multiColumnTreeView.columns.Add(new Column { title = "Power", width = 80 });

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

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

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

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

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

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

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

Сортировка MultiColumnTreeView

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

После включения сортировки, чтобы сортировать по одному столбцу, щелкните заголовки столбцов. Чтобы сортировать по нескольким столбцам, удерживайте нажатой клавишу Ctrl (macOS: Cmd) и щелкните. Чтобы отключить сортировку, удерживайте нажатой клавишу Схема и щелкните.

Сортировка по умолчанию

Чтобы разрешить сортировку с использованием алгоритма по умолчанию, установите атрибут sortingMode на ColumnSortingMode.Defaultи реализуйте Column.comparison для сравнения двух элементов по их индексу в источнике.

Для примера см. и пример сортировки по умолчанию MultiColumnTreeView.

Пользовательская сортировка

Чтобы реализовать пользовательскую сортировку, установите атрибут sortingMode на ColumnSortingMode.Customи реализуйте обратный вызов columnSortingChanged. В обратном вызове используйте sortColumns для соответствующей переупорядочки списка и запуска RefreshItems() после обновления источника элементов.

Атрибут sortColumns — это текущее состояние сортируемых столбцов: они перечислены в том порядке, в каком по ним идёт сортировка. Если вы сортируете по столбцу 1, затем по столбцу 2, затем по столбцу 3, список sortedColumns будет [1, 2, 3]. Если вы сортируете по столбцу 3, затем по столбцу 2, затем по столбцу 1, список sortedColumns будет [3, 2, 1].

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

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

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

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

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

MultiColumnTreeView FAQs

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

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

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

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

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

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

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

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

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

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

Для этого нет выделенных APIs. Вы можете использовать column.bindCell и column.unbindCell для отслеживания индексов в одном из столбцов.

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

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

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

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

Примеры

Следующий пример UXML создает MultiColumnTreeView:

<UXML xmlns="UnityEngine.UIElements">
    <MultiColumnTreeView class="the-uxml-multi-column-treeview" fixed-item-height="20">
        <!-- Columns and Column aren't Visual Elements or controls; they are considered attributes of MultiColumnTreeView. -->
        <Columns>
            <Column name="data" title="Data" width="150" />
            <Column name="active" title="Active?" width="80" />
        </Columns>
    </MultiColumnTreeView>
</UXML>

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

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

.unity-multi-column-view__cell > .unity-tree-view__item-content > .unity-label,
.unity-multi-column-view__cell > .unity-tree-view__item-content > .unity-toggle {
    flex-grow: 1;
    margin-top: 2px;
}

Следующий пример C# иллюстрирует некоторые из настраиваемых функций MultiColumnTreeView:

// 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 columns were created in the UXML but they can also be set using MultiColumnTreeView.columns here.
var multiColumnTreeView = container.Q<MultiColumnTreeView>();
multiColumnTreeView.selectionType = SelectionType.Multiple;

// Call MultiColumnTreeView.SetRootItems() to populate the data in the tree.
multiColumnTreeView.SetRootItems(items);

// For each column, set Column.makeCell to initialize each node in the tree.
// You can index the columns array with names or numerical indices.
multiColumnTreeView.columns["data"].makeCell = () => new Label();
multiColumnTreeView.columns["active"].makeCell = () =>
{
    var toggle = new Toggle();
    toggle.SetEnabled(false);
    return toggle;
};

// For each column, set Column.bindCell to bind an initialized node to a data item.
multiColumnTreeView.columns["data"].bindCell = (element, index) =>
{
    var item = multiColumnTreeView.GetItemDataForIndex<string>(index);
    var id = multiColumnTreeView.GetIdForIndex(index);
    ((Label)element).text = $"ID {id} - {item}";
};

multiColumnTreeView.columns["active"].bindCell = (element, index) =>
    ((Toggle)element).value = index % 2 == 0;

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

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

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

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

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

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

Имя	Тип	Описание
`columns`	`UIElements.Columns`	Коллекция столбцов для многостороннего заголовка.
`sort-column-descriptions`	`UIElements.SortColumnDescriptions`	Коллекция отсортированных столбцов по умолчанию.
`sorting-enabled`	`boolean`	Включена ли сортировка в многостороннем заголовке. Это устарело. Используйте `sortingMode` вместо этого.
`sorting-mode`	`UIElements.ColumnSortingMode`	Определяет способ сортировки столбцов. Чтобы включить сортировку, задайте значение `ColumnSortingMode.Default` или `ColumnSortingMode.Custom`. Режим `Default` использует алгоритм сортировки, предоставленный `MultiColumnController` и работающий с индексами. Собственную сортировку также можно реализовать в режиме `Custom`, реагируя на `columnSortingChanged` в обработчике события. Примечание: если отсортирован хотя бы один столбец, изменение порядка временно отключается.

Унаследованные атрибуты 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 на каждом уровне его иерархии.