该文章使用的Unity版本为2020.1.7f1c1 使用的package版本为UIBuilder：1.0.0-preview7，UI：1.0.0 有关如何安装的内容可以参考我前一篇文章：如何安装package
在本文中将记录如何自定义VisualElement组件，然后在UIBuilder中进行使用
1.使用UIBuilder制作一个简单的UI如下图所示 如果有需要，例子的uxml代码在下方，可参考
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False"> <ui:VisualElement> <ui:VisualElement name="ui-status-container"> <ui:VisualElement name="ui-border" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: auto; height: auto; background-color: rgba(255, 255, 255, 0); border-left-color: rgb(178, 112, 0); border-right-color: rgb(178, 112, 0); border-top-color: rgb(178, 112, 0); border-bottom-color: rgb(178, 112, 0); overflow: hidden;"> <ui:VisualElement name="ui-tracker" style="width: 65%; height: 15px; background-color: rgb(113, 197, 46); max-width: 100%; min-width: 0;" /> </ui:VisualElement> <ui:VisualElement name="ui-status-label-container" style="flex-direction: row; margin-top: -6px; margin-left: 7px; align-items: center;"> <ui:Label name="discribe" text="Test" style="padding-left: 0; padding-right: 0;" /> <ui:Label text="12345" name="lab" style="font-size: 18px; margin-left: 29px; padding-left: 0; padding-right: 0;" /> </ui:VisualElement> </ui:VisualElement> </ui:VisualElement> </ui:UXML>2.接下来我们需要创建一个类Statusbar，并继承VisualElement 因为我们想要对上述uxml中名字为discribe的内容进行修改，因此我们要定义一个Label以及一个string属性
using UnityEditor; using UnityEngine; using UnityEngine.UIElements; public class Statusbar : VisualElement { private Label m_discribe = default; public string Discribe { get { return m_discribe.text; } set { m_discribe.text = value; } } }创建一个构造函数，在构造函数中进行初始化的操作
public class Statusbar : VisualElement { //.............................. //这里是uxml的路径 private const string UXML_PATH = "Assets/UI/Statusbar.uxml"; public Statusbar() { VisualTreeAsset template = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>(UXML_PATH); template.CloneTree(this); Init(); } public Init() { //设置好Label变量 m_discribe = this.Q<Label>("discribe"); } }3.使用工厂模式来绑定这些数据
public class Statusbar : VisualElement { //..................... public class Factory : UxmlFactory<Statusbar, Traits> { } public class Traits : UxmlTraits { //绑定所需的Uxml属性 UxmlStringAttributeDescription m_discribe = new UxmlStringAttributeDescription { name = "discribe" }; public override void Init(VisualElement ve, IUxmlAttributes bag, CreationContext cc) { base.Init(ve, bag, cc); Statusbar statusBar = ve as Statusbar; statusBar.Discribe = m_discribe.GetValueFromBag(bag, cc); } }4.接下来就能看到结果，在UIBuilder-Library-Project-Custom Controls(C#)中就能看到我们自定义的组件 这样我们就制作好了自定义组件，可以在其他界面中进行使用 5.接下来我们就可以在Statusbar中自定义函数进行调用
//.......... //随机数字的功能 public void SetDiscribe() { Discribe = Random.Range(0, 100).ToString(); }6.然后通过调用该组件的函数，就能有效果如下 通过这种方式就能够制作出自定义的组件进行使用
