当前位置：首页 > news >正文

UIElement编辑器扩展组件 Inspector

news 2025/7/20 17:22:28

UIElement编辑器扩展组件 Inspector

https://docs.unity.cn/cn/2021.3/Manual/UIE-create-a-binding-uxml-inspector.html

简单开始

声明序列化VisualTreeAsset
[SerializeField] VisualTreeAsset visualTree;
声明完，直接在脚本的Inspector面板，把你这个界面的UXML拖进去就可以了，非常方便

基础的属性，在UIBuilder里拖好需要的组件，bingdingPath填好属性名即可

//测试组件
public class TestComp : MonoBehaviour
{public int TestInt;public GameObject TestGO;
}

//测试组件的编辑器扩展
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;[CustomEditor(typeof(TestComp))]
public class TestCompEditor : Editor
{[SerializeField]VisualTreeAsset m_InspectorXML;public override VisualElement CreateInspectorGUI(){var root = m_InspectorXML.CloneTree();return root;}
}

封装的数据对象

[Serializable]
public class TestItem
{public string name;public GameObject gameObject;
}
public class TestComp : MonoBehaviour
{public int TestInt;public GameObject TestGO;public TestItem Item;
}

对TestItem单独创建一个UXML,根据属性在UIBuilder拖好需要的组件

在TestCompEditor.cs，增加TestItem.uxml这个文件的声明

增加一点CreateInspectorGUI代码

//测试组件的编辑器扩展
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;[CustomEditor(typeof(TestComp))]
public class TestCompEditor : Editor
{[SerializeField]VisualTreeAsset m_InspectorXML;//增加的TestItem UXML[SerializeField]VisualTreeAsset m_ItemAsset;public override VisualElement CreateInspectorGUI(){var root = visualTree.CloneTree();var item = m_PropertyAsset.CloneTree();//指定TestComp的属性名item.bindingPath = "Item";//加入即可root.Add(item);return root;}
}

List+数据对象

[Serializable]
public class TestItem
{public string name;public GameObject gameObject;
}
public class TestComp : MonoBehaviour
{public int TestInt;public GameObject TestGO;public TestItem Item;public List<TestItem> ItemList;
}

TestComp.uxml添加一个ListView
因为这个List内的数据用的还是上个例子的TestItem, 就继续用TestItem.uxml了

（ListView非常方便，reorderable之类的样式，直接在UIBuilder就能用了）

//测试组件的编辑器扩展
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;[CustomEditor(typeof(TestComp))]
public class TestCompEditor : Editor
{[SerializeField]VisualTreeAsset m_InspectorXML;//增加的TestItem UXML[SerializeField]VisualTreeAsset m_ItemAsset;public override VisualElement CreateInspectorGUI(){var root = visualTree.CloneTree();var item = m_ItemAsset.CloneTree();item.bindingPath = "Item";root.Add(item);//找到TestComp.uxml添加的ListView,多个List可以用namevar listView = root.Q<ListView>();//makeItem赋值方法listView.makeItem = m_ItemAsset.CloneTree;return root;}
}