# UIBulider 的使用

UIElement 是一种类似于 Html 形式进行界面开发的方式,创建的 EditorWidow 包括以下 3 个文件。

image-20220317003751243

  • C#- 代码控制界面逻辑 类似于 js
  • Uss - 样式控制器 类似于 Css
  • Uxml - 基础骨架模板 类型 Html

image-20220317004247734

UIBulider界面

# 双击 Asset 打开编辑窗

public class DialogGraphEditWindow : EditorWindow
{
    private static VisualElement rootMain;
    
    [OnOpenAsset(1)]
    public static bool OpenAsset(int id,int line)
    {
        if (EditorUtility.InstanceIDToObject(id) is DialogTreeGraphAsset graph)
        {
            var window = GetWindow<DialogGraphEditWindow>();
            window.titleContent = new GUIContent("对话窗");
            var root = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/GraphWindow.uxml");
            if (rootMain==null)
            {
                rootMain = root.Instantiate();
            }
            window.rootVisualElement.Add(rootMain);
            window.minSize = new Vector2(600, 450);
            
            return true;
        }
        return false;
    }
 
}

# Uss 样式表

# Uxml 模板

# Ui 绑定

# 流程模板

using UnityEditor;
using UnityEngine.UIElements;
public class IndexEditorWindow : EditorWindow
{
    private static VisualElement rootMain;
    [MenuItem("Fasty/主界面")]
    public static void Open()
    {
        var root = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Index.uxml");
        rootMain = root.Instantiate();
        var window = GetWindow<IndexEditorWindow>();
        window.rootVisualElement.Add(rootMain);
        CreateUi();
        InitEvent();
        window.Show();
    }
    /// <summary>
    /// 动态创建 Ui
    /// </summary>
    private static void CreateUi()
    {
       
    }
    /// <summary>
    /// 处理事件
    /// </summary>
    private static void InitEvent()
    {
        var btn = rootMain.Q<Button>("showBtn");
        btn.clicked += () => { rootMain.Q<Label>("title").text = "查看被点击了"; };
        btn = rootMain.Q<Button>("descBtn");
        btn.clicked += () => { rootMain.Q<Label>("title").text = "说明被点击了"; };
    }
}
更新于 阅读次数

请我喝[茶]~( ̄▽ ̄)~*

Fasty 微信支付

微信支付

Fasty 支付宝

支付宝

Fasty 贝宝

贝宝