Unity UIToolkit 如何在Editor模式进行使用

该文章使用的Unity版本为2020.1.7f1c1 使用的package版本为UIBuilder：1.0.0-preview7，UI：1.0.0 有关如何安装的内容可以参考我前一篇文章：如何安装package

在本文中将记录如何在Editor模式中使用已经制作好的uxml文件 Editor(Inspector)模式可以参考之前的文章UI Builder介绍，这里再记录一次

---

Editor(Inspector)

一、简单案例

1.创建一个类

using UnityEngine; [ExecuteInEditMode] public class UIToolkitSample : MonoBehaviour { public string m_discribe; public int m_curHP; public int m_maxHP; }

2.为这个类创建Editor类，并重写CreateInspectorGUI()方法，如下所示

using UnityEditor; using UnityEngine; using UnityEngine.UIElements; [CustomEditor(typeof(UIToolkitSample))] public class UIToolkitSampleEditor : Editor { TemplateContainer uxmlVE; public override VisualElement CreateInspectorGUI() { //加载UXML资源 var visualTree = Resources.Load("uxml_UIToolkitSample") as VisualTreeAsset; uxmlVE = visualTree.CloneTree(); return uxmlVE; } }

此时就会看见Inspector面板已经和UIBuilder中所绘制的一样了，注意要绑定好数据

3.通过为Button添加点击事件来测试是否绑定成功

public override VisualElement CreateInspectorGUI() { //... uxmlVE.Q<Button>("SetData").clicked += SetData_clicked; //... } private void SetData_clicked() { Debug.Log(((UIToolkitSample)target).m_discribe); }

我们可以看到，数据已经绑定成功了

二、如何修改自定义组件的数据

目前并没有发现如何将Label数据进行绑定，对于自定义组件，可能需要自己制作函数用来使用

public class Statusbar : VisualElement { //... public void SetDiscribe(string value) { Discribe = value; } //... } public class UIToolkitSampleEditor : Editor { //... private void SetData_clicked() { string temp = ((UIToolkitSample)target).m_discribe; Debug.Log(temp); uxmlVE.Q<Statusbar>().SetDiscribe(temp); } }

这是在上次的教学中，制作的自定义VisualElement组件

最后结果如下