在本文中3D天堂将介绍如何使用Unity的UI Toolkit（工具包）中的MultiColumnTreeView实现多列树视图。
介绍
使用UI Toolkit MutiColumnTreeView，可以创建如下所示的多列树视图，阅读本文的同时可以从这里进行参考。
单列树视图3D天堂后续会介绍。
创建UXML文件
首先在UXML文件中创建布局，像这样MultiColumnTreeView在其中设置两列：
<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:MultiColumnTreeView fixed-item-height="20">
<ui:Columns>
<ui:Column name="name" title="Name" width="120" />
<ui:Column name="description" title="Description" width="200" />
</ui:Columns>
</ui:MultiColumnTreeView>
</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}", description = $"Description {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 multiColumnTreeView = rootVisualElement.Q<MultiColumnTreeView>();
// Set data source
multiColumnTreeView.SetRootItems(_rootItems);
var nameColumn = multiColumnTreeView.columns["name"];
var descriptionColumn = multiColumnTreeView.columns["description"];
// The process of creating the cell layout
nameColumn.makeCell = labelItemLayout.CloneTree;
descriptionColumn.makeCell = labelItemLayout.CloneTree;
// The process of setting the contents of a cell
nameColumn.bindCell = (e, i) => e.Q<Label>().text = multiColumnTreeView.GetItemDataForIndex<Item>(i).name;
descriptionColumn.bindCell = (e, i) =>
e.Q<Label>().text = multiColumnTreeView.GetItemDataForIndex<Item>(i).description;
}
[MenuItem("Window/Example")]
public static void ShowWindow()
{
GetWindow<Example>();
}
[Serializable]
public struct Item
{
public string name;
public string description;
}
}执行结果
从菜单Window → Example打开一个窗口会得到以下结果：
现在能够确认它已正确的实施了。
…
以上是3D天堂关于Unity中的UI Toolkit使用MultiColumnTreeView实现多列树视图的全部内容，如果你有任何反馈，请随时在本页面下方留言。