这教程3D天堂将解释如何使用Unity的UI Toolkit中的TreeView实现单列树视图。
介绍
使用UI工具包TreeView，可以创建如下所示的树状外观，阅读本文的同时可以从这里进行参考。
此文总结了如何使用这样的TreeView创建一个EditorWindow，多列树视图可以从下面的站内文章中参阅。
创建UXML文件
首先在UXML文件中创建布局，设置如下：
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
<ui:TreeView view-data-key="unity-tree-view" focusable="true" />
</ui:UXML>另存为editor_layout.uxml。
接下来，只要在列表中显示的每个项目创建一个布局，但它只显示标签。
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
<ui:Label text="Label" />
</ui:UXML>另存为item_layout.uxml。
创建编辑器窗口
然后创建以下EditorWindow脚本：
using System;
using System.Collections.Generic;
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
public sealed class Example : EditorWindow
{
[SerializeField] private VisualTreeAsset editorLayout;
[SerializeField] private VisualTreeAsset labelItemLayout;
private readonly List<TreeViewItemData<Item>> _rootItems = new();
private void Reset()
{
var id = 0;
for (var i = 0; i < 10; i++)
{
// Create a list of child items
var items = new List<TreeViewItemData<Item>>(10);
for (var j = 0; j < 10; j++)
{
var item = new TreeViewItemData<Item>(id++, new Item { name = $"Item {j}" });
items.Add(item);
}
// Create a root item and add child items
var rootItem = new TreeViewItemData<Item>(id++, new Item { name = $"Group {i}" }, items);
// Add only root item to data source
_rootItems.Add(rootItem);
}
}
private void CreateGUI()
{
editorLayout.CloneTree(rootVisualElement);
var treeView = rootVisualElement.Q<TreeView>();
// Set data source
treeView.SetRootItems(_rootItems);
// The process of creating the item layout
treeView.makeItem = labelItemLayout.CloneTree;
// The process of setting the content of the item
treeView.bindItem = (e, i) => e.Q<Label>().text = treeView.GetItemDataForIndex<Item>(i).name;
}
[MenuItem("Window/Example")]
public static void ShowWindow()
{
GetWindow<Example>();
}
[Serializable]
public struct Item
{
public string name;
}
}可以为每个项目生成布局并绑定项目的内容。
执行结果
从菜单项Window → Example打开一个窗口会得到如下结果：
现在能够确认它已正确的实施了。
…
以上是3D天堂关于Unity中的UI Toolkit使用MultiColumnTreeView实现多列树视图的全部内容，如果你有任何反馈，请随时在本页面下方留言。