ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

UIElement编辑器扩展 组件 Inspector

UIElement编辑器扩展 组件 Inspector

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;}
}
返回列表