Unity 2020+ UI Toolkit实战：5步打造高效编辑器扩展面板（附完整代码）

Unity 2020+ UI Toolkit实战：5步打造高效编辑器扩展面板（附完整代码）

在Unity编辑器开发中，UI Toolkit正逐渐成为构建自定义工具的首选方案。相比传统的IMGUI系统，这套基于XML和CSS的现代UI框架提供了更清晰的代码结构、更灵活的样式控制和更高效的渲染性能。本文将带你从零开始，用五个关键步骤实现一个功能完整的场景对象管理面板，包含列表展示、属性绑定、实时调试等实用功能。

1. 环境准备与基础搭建

确保使用Unity 2020.3或更高版本（推荐2021 LTS）。在Package Manager中确认已安装"UI Builder"预览包：

# 通过命令行快速打开UI Builder Tools > UI Toolkit > UI Builder

创建基础编辑器窗口类：

using UnityEditor; using UnityEngine; using UnityEngine.UIElements; public class SceneManagerWindow : EditorWindow { [MenuItem("Tools/Scene Object Manager")] public static void ShowWindow() { var window = GetWindow<SceneManagerWindow>(); window.titleContent = new GUIContent("场景管理器"); window.minSize = new Vector2(450, 600); } public void CreateGUI() { // 后续步骤将在此添加UI构建代码 } }

提示：在2020版本中需要手动启用预览功能：Edit > Preferences > Package Manager > Enable Preview Packages

2. 界面布局与视觉元素构建

使用UI Builder创建可视化布局（保存为SceneManager.uxml）：

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements"> <ui:VisualElement class="main-container"> <ui:Label text="场景对象管理器" class="header"/> <ui:VisualElement class="content-row"> <ui:VisualElement class="left-panel"> <ui:Button text="刷新场景" name="refresh-btn"/> <ui:ListView name="object-list" selectionType="Single"/> </ui:VisualElement> <ui:VisualElement class="right-panel"> <ui:ObjectField name="prefab-field" label="预制体引用"/> <ui:Button text="生成实例" name="create-btn"/> <ui:TextField name="name-field" label="对象名称"/> <ui:Vector3Field name="position-field" label="位置"/> </ui:VisualElement> </ui:VisualElement> </ui:VisualElement> </ui:UXML>

配套USS样式（SceneManager.uss）：

.main-container { flex-grow: 1; padding: 10px; } .header { font-size: 18px; font-weight: bold; margin-bottom: 15px; } .content-row { flex-direction: row; flex-grow: 1; } .left-panel { width: 200px; margin-right: 10px; } .right-panel { flex-grow: 1; }

3. 动态数据绑定与交互逻辑

实现核心功能代码：

private ListView objectList; private TextField nameField; private Vector3Field positionField; public void CreateGUI() { // 加载UXML模板 var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>( "Assets/Editor/SceneManager.uxml"); visualTree.CloneTree(rootVisualElement); // 加载USS样式 var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>( "Assets/Editor/SceneManager.uss"); rootVisualElement.styleSheets.Add(styleSheet); // 获取控件引用 objectList = rootVisualElement.Q<ListView>("object-list"); var refreshBtn = rootVisualElement.Q<Button>("refresh-btn"); var createBtn = rootVisualElement.Q<Button>("create-btn"); nameField = rootVisualElement.Q<TextField>("name-field"); positionField = rootVisualElement.Q<Vector3Field>("position-field"); var prefabField = rootVisualElement.Q<ObjectField>("prefab-field"); // 初始化列表 refreshBtn.clicked += RefreshObjectList; RefreshObjectList(); // 设置列表项模板 objectList.makeItem = () => new Label(); objectList.bindItem = (element, i) => { var obj = objectList.itemsSource[i] as GameObject; (element as Label).text = obj.name; }; // 选择事件 objectList.onSelectionChange += selected => { var selectedObj = selected.First() as GameObject; nameField.value = selectedObj.name; positionField.value = selectedObj.transform.position; }; // 创建按钮事件 createBtn.clicked += () => { if(prefabField.value != null) { var instance = Instantiate( prefabField.value as GameObject, Vector3.zero, Quaternion.identity); instance.name = $"{prefabField.value.name}_Clone"; RefreshObjectList(); } }; // 名称修改事件 nameField.RegisterValueChangedCallback(evt => { if(objectList.selectedItem != null) { ((GameObject)objectList.selectedItem).name = evt.newValue; objectList.Rebuild(); } }); } private void RefreshObjectList() { objectList.itemsSource = GameObject.FindObjectsOfType<GameObject>() .Where(go => go.transform.parent == null).ToList(); objectList.Rebuild(); }

4. 高级功能扩展

4.1 序列化属性绑定

实现与Inspector的深度集成：

private SerializedObject serializedTarget; void OnSelectionChange() { var selected = Selection.activeObject as GameObject; if(selected != null) { serializedTarget = new SerializedObject(selected); nameField.BindProperty(serializedTarget.FindProperty("m_Name")); var transform = selected.transform; var serializedTransform = new SerializedObject(transform); positionField.BindProperty( serializedTransform.FindProperty("m_LocalPosition")); } }

4.2 自定义控件开发

创建可复用的场景对象组件：

public class SceneObjectList : VisualElement { public new class UxmlFactory : UxmlFactory<SceneObjectList> {} private ListView listView; public SceneObjectList() { // 加载布局 var visualTree = Resources.Load<VisualTreeAsset>("SceneObjectList"); visualTree.CloneTree(this); listView = this.Q<ListView>(); listView.makeItem = () => new Label(); listView.bindItem = (e, i) => { var obj = listView.itemsSource[i] as GameObject; (e as Label).text = obj.name; }; } public void Refresh(IEnumerable<GameObject> objects) { listView.itemsSource = objects.ToList(); listView.Rebuild(); } }

5. 调试与优化技巧

5.1 性能优化方案

5.2 实用调试方法

// 在面板中添加调试控制台 var console = new IMGUIContainer(() => { GUILayout.Label("实时调试"); if(GUILayout.Button("打印选中对象")) { Debug.Log($"当前选择: {objectList.selectedItem}"); } }); rootVisualElement.Add(console);

实现编辑器工具的核心价值在于提升日常工作效率。经过多次项目实践，我发现将常用操作集中到自定义面板中，能使场景编辑速度提升3-5倍。特别是在处理大量场景对象时，这种可视化工具的优势更加明显。