版本:Unity 6 (6000.0)
语言:英语
UXML 元素 ToolbarToggle
UXML 元素 TwoPaneSplitView

UXML 元素 TreeView

使用 TreeView 以树状结构显示分层数据。它是一个功能强大且灵活的控件,通常用于呈现具有父子关系或嵌套结构的数据。

如果您需要一个简单的项目列表(而不是分层树),请考虑使用 ListView 控件。

创建 TreeView

您可以使用 UI(用户界面) 允许用户与您的应用程序交互。Unity 目前支持三种 UI 系统。 更多信息
请参阅 术语表
构建器、UXML 和 C# 创建 TreeView。以下 C# 示例创建了一个 TreeView

var treeView = new TreeView();

刷新集合视图

要刷新集合视图,通常,调用 RefreshItemsRefreshItem 方法。但是,在以下情况下,请改为调用 Rebuild 以刷新集合视图

  • 您更改了 数据源 的类型,例如从 List<float> 更改为 List<Vector3>
  • 您对 makeItemdestroyItem 进行了更改。

注意:如果您调用 Rebuild,则集合视图将完全重建,这可能代价高昂。如果您调用 RefreshItemsRefreshItem,则集合视图仅刷新,这成本较低。

将 TreeView 绑定到数据

您可以将 TreeView 绑定到数据源。数据源可以是对象列表或字符串列表。

以下示例将 TreeView 绑定到自定义类型。

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

注意:在上面的示例中,TreeView.bindItem 接收索引。您必须使用索引(而不是 ID)与 GetItemDataForIndex<T> 一起使用。

为 TreeView 实现拖放操作

拖放是 UI 设计中的一项常见功能。要实现拖放操作,请覆盖以下方法

  • 要启用拖动项目,请覆盖 canStartDrag
  • 要设置拖动的项目,请覆盖 setupDragAndDrop
  • 要获取项目状态更改,请覆盖 dragAndDropUpdate。您可以根据拖动位置或其他条件执行某些操作。
  • 要控制拖放行为,请覆盖 handleDrop

在拖放操作期间,您可以通过拖动来启用项目的重新排序。要启用,请在 UI 构建器、UXML 和 C# 中将 reorderable 属性设置为 true

请参阅 在窗口之间创建拖放列表和树视图 以获取示例。

设置 TreeView 的层次结构

要设置 TreeView 的层次结构,请声明 TreeViewItemData<T>,其中 T 是树的数据类型,然后通过 SetRootItems API 设置源。例如,假设您有以下 UXML 结构

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

您可以按如下方式设置 TreeView 的层次结构

/// <sample>
// 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, (j+1).ToString()));

    var treeViewItemData = new TreeViewItemData<string>(itemIndex, (i+1).ToString(), 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);
    (e as Label).text = 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 += (selectedItems) =>
{
    Debug.Log("Items selected: " + string.Join(", ", selectedItems));
};
/// </sample>

要在 Unity 中实时尝试此示例,请转到 **窗口** > **UI 工具包** > **示例**。

TreeView 常见问题解答

以下是关于 TreeView 控件的一些常见问题解答

我能否获取屏幕上可见行的索引?

没有为此提供专用的 API。您可以使用 bindItemunbindItem 回调来跟踪这些索引。

我能否获取视图中可见行的列表?

没有为此提供专用的 API。您可以使用 UQuery 来检索感兴趣的元素。

视图控制器的任何覆盖函数是否必须调用 base.Method

仅当您希望扩展其默认行为时才调用此方法。

我在我的行中添加了一个切换按钮。为什么当用户选择它时,选择不会跳转到该行?

默认情况下,仅当鼠标按下事件未被行的内容使用时,才会选择该行。在这种情况下,您的切换按钮会停止事件传播。要解决此问题,请在切换按钮上使用 TrickleDown 注册 PointerDownEvent 回调以调用 SetSelection

用户在视图中更改选择时,我该如何接收回调?

建议使用 selectedIndicesChanged 回调在需要时按索引检索数据。虽然您也可以使用 selectionChanged,但请注意,它返回一个对象列表,在与值类型一起使用时会导致装箱分配。

我该如何在 ID 和索引之间进行转换?

使用 BaseTreeViewController.GetIndexForIdBaseTreeViewController.GetIdForIndex

我能否拥有一个水平 TreeView?

TreeView 控件不支持水平布局和虚拟化。建议使用带有 flex-direction: row 的 ScrollView 来水平布局元素。

示例

C# 基类和命名空间

C# 类TreeView
命名空间UnityEngine.UIElements
基类BaseTreeView

成员 UXML 属性

此元素具有以下成员属性

名称 类型 描述
item-template UIElements.VisualTreeAsset 构建树中每个回收和重新绑定的元素的 UXML 模板。此模板旨在替换 makeItem 定义。

继承的 UXML 属性

此元素从其基类继承以下属性

名称 类型 描述
auto-expand 布尔值 如果为 true,则在将项目添加到 TreeView 时会自动展开项目。
binding-path 字符串 要绑定的目标属性的路径。
fixed-item-height 浮点数 列表中单个项目的高度(以像素为单位)。

当使用 virtualizationMethod 设置为 FixedHeight 时,必须设置此属性,以便集合视图才能正常工作。如果在 virtualizationMethodDynamicHeight 时设置,它将作为默认高度,以帮助计算必要的项目数量和可滚动区域,然后才能布置项目。它应设置为项目的最小预期高度。
focusable 布尔值 如果元素可以聚焦,则为 True。
reorderable 布尔值 获取或设置一个值,该值指示用户是否可以拖动列表项以重新排序。

默认值为 false,允许用户在您实现 canStartDragsetupDragAndDropdragAndDropUpdatehandleDrop 时将项目拖放到其他视图中。将此值设置为 true 以允许用户重新排序列表中的项目。
selection-type UIElements.SelectionType 控制选择类型。

默认值为 SelectionType.Single。当您将集合视图设置为禁用选择时,任何当前选择都将被清除。
show-alternating-row-backgrounds UIElements.AlternatingRowBackground 此属性控制集合视图行的背景颜色是否交替。取自 AlternatingRowBackground 枚举的值。
show-border 布尔值 启用此属性以在集合视图周围显示边框。

如果设置为 true,则集合视图内部使用的 ScrollView 周围会出现边框。
tabindex 整数 用于在焦点环中对可聚焦项进行排序的整数。必须大于或等于零。
virtualization-method UIElements.CollectionVirtualizationMethod 当滚动条可见时,此集合要使用的虚拟化方法。取自 CollectionVirtualizationMethod 枚举的值。

默认值为 FixedHeight。使用固定高度时,请指定 fixedItemHeight 属性。固定高度的性能更高,但在内容方面灵活性较差。使用 DynamicHeight 时,集合将等待实际高度计算完成。动态高度的灵活性更高,但性能较差。

此元素还从 VisualElement 继承以下属性

名称 类型 描述
content-container 字符串 子元素添加到其中,通常与元素本身相同。
data-source 对象 为该 VisualElement 分配数据源,该数据源将覆盖任何继承的数据源。此数据源由所有子元素继承。
data-source-path 字符串 从数据源到值的路径。
data-source-type System.Type 可以分配给此 VisualElement 的数据源的可能类型。

此信息仅由 UI 构建器用作提示,以便在设计时无法指定有效数据源时为数据源路径字段提供一些补全。
language-direction UIElements.LanguageDirection 指示元素文本的方向性。该值将传播到元素的子元素。

将 languageDirection 设置为 RTL 通过反转文本并适当地处理换行和自动换行来添加对从右到左 (RTL) 的基本支持。但是,它不提供全面的 RTL 支持,因为这需要文本整形,包括字符的重新排序和 OpenType 字体功能支持。全面的 RTL 支持计划在未来的更新中提供,这将涉及其他 API 来处理语言、脚本和字体功能规范。

为了增强此属性的 RTL 功能,用户可以探索 Unity Asset Store 中可用的第三方插件并使用 ITextElementExperimentalFeatures.renderedText
name 字符串 此 VisualElement 的名称。

使用此属性编写目标特定元素的 USS 选择器。标准做法是为元素提供唯一名称。
picking-mode UIElements.PickingMode 确定此元素是否可以在 mouseEvents 或 IPanel.Pick 查询期间被拾取。
style 字符串 设置 VisualElement 样式值。
tooltip 字符串 在用户将鼠标悬停在元素上一段时间后,在信息框内显示的文本。这仅在编辑器 UI 中受支持。
usage-hints UIElements.UsageHints

一组提示值,用于指定VisualElement的高级预期使用模式。此属性仅可在VisualElement尚未成为Panel的一部分时设置。一旦成为Panel的一部分,此属性将实际上变为只读,尝试更改它将引发异常。正确的UsageHints规范会驱动系统做出更好的决策,以根据预期的使用模式来处理或加速某些操作。请注意,这些提示不会影响行为或视觉结果,而只会影响面板及其内部元素的整体性能。建议始终考虑指定正确的UsageHints,但请记住,某些UsageHints在特定条件下可能会被内部忽略(例如,由于目标平台上的硬件限制)。
视图数据键 字符串 用于视图数据持久化,例如树展开状态、滚动位置或缩放级别。

此键用于从视图数据存储中保存和加载视图数据。如果您不设置此键,则关联的VisualElement将禁用持久化。有关更多信息,请参阅视图数据持久化

USS 类

下表列出了所有 C# 公共属性名称及其相关的 USS 选择器。

C# 属性 USS 选择器 描述
ussClassName .unity-tree-view TreeView 元素的 USS 类名称。

Unity 将此 USS 类添加到 TreeView 元素的每个实例。应用于此类的任何样式都会影响视觉树中样式表旁边或下方的每个 TreeView。
itemUssClassName .unity-tree-view__item TreeView 项目元素的 USS 类名称。

Unity 将此 USS 类添加到 TreeView 的每个项目元素。应用于此类的任何样式都会影响视觉树中样式表旁边或下方的每个项目。
itemToggleUssClassName .unity-tree-view__item-toggle TreeView 项目切换元素的 USS 类名称。

Unity 将此 USS 类添加到 TreeView 的每个项目切换元素。应用于此类的任何样式都会影响视觉树中样式表旁边或下方的每个项目。
itemIndentsContainerUssClassName .unity-tree-view__item-indents TreeView 缩进容器元素的 USS 类名称。

Unity 将此 USS 类添加到 TreeView 的每个缩进容器元素。应用于此类的任何样式都会影响视觉树中样式表旁边或下方的每个项目。
itemIndentUssClassName .unity-tree-view__item-indent TreeView 缩进元素的 USS 类名称。

Unity 将此 USS 类添加到 TreeView 的每个缩进元素。应用于此类的任何样式都会影响视觉树中样式表旁边或下方的每个项目。
itemContentContainerUssClassName .unity-tree-view__item-content TreeView 项目容器元素的 USS 类名称。

Unity 将此 USS 类添加到 TreeView 的每个项目容器元素。应用于此类的任何样式都会影响视觉树中样式表旁边或下方的每个项目。
ussClassName .unity-collection-view BaseVerticalCollectionView 元素的 USS 类名称。

Unity 将此 USS 类添加到 BaseVerticalCollectionView 元素的每个实例。应用于此类的任何样式都会影响视觉树中样式表旁边或下方的每个 BaseVerticalCollectionView。
borderUssClassName .unity-collection-view--with-border 带有边框的 BaseVerticalCollectionView 元素的 USS 类名称。

如果实例的BaseVerticalCollectionView.showBorder属性设置为 true,则 Unity 会将此 USS 类添加到 BaseVerticalCollectionView 元素的实例。应用于此类的任何样式都会影响视觉树中样式表旁边或下方的每个此类 BaseVerticalCollectionView。
itemUssClassName .unity-collection-view__item BaseVerticalCollectionView 元素中项目元素的 USS 类名称。

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 BaseVerticalCollectionView 中所选项目元素的 USS 类名称。

Unity 将此 USS 类添加到 BaseVerticalCollectionView 中的每个所选元素。BaseVerticalCollectionView.selectionType属性决定可以选择零个、一个还是多个元素。应用于此类的任何样式都会影响视觉树中样式表旁边或下方的每个 BaseVerticalCollectionView 项目。
itemAlternativeBackgroundUssClassName .unity-collection-view__item--alternative-background BaseVerticalCollectionView 中奇数行的 USS 类名称。

BaseVerticalCollectionView.showAlternatingRowBackgrounds属性设置为ContentOnlyAll时,Unity 会将此 USS 类添加到 BaseVerticalCollectionView 中的每个奇数项目。当showAlternatingRowBackgrounds属性设置为这两个值中的任何一个时,奇数项目将显示与偶数项目不同的背景颜色。此 USS 类用于区分奇数项目和偶数项目。当showAlternatingRowBackgrounds属性设置为None时,不会添加 USS 类,并且依赖于它的任何样式或行为都将失效。
listScrollViewUssClassName .unity-collection-view__scroll-view BaseVerticalCollectionView 中滚动视图的 USS 类名称。

Unity 将此 USS 类添加到 BaseVerticalCollectionView 的滚动视图。应用于此类的任何样式都会影响视觉树中样式表旁边或下方的每个 BaseVerticalCollectionView 滚动视图。
disabledUssClassName .unity-disabled 本地禁用元素的 USS 类名称。

您还可以使用检查器或 UI 工具包调试器中的匹配选择器部分查看哪些 USS 选择器影响其层次结构中每个级别的VisualElement的组件。

其他资源

UXML 元素 ToolbarToggle
UXML 元素 TwoPaneSplitView