# 简单介绍

# UIBulider 的使用

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

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

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 样式表

形如这样的称为样式表 uss，uss 决定了 ui 元素的显示效果。

	Label {
	font-size: 20px;
	-unity-font-style: bold;
	color: rgb(68, 138, 255);
	}

# Uxml 模板

uxml 模板类似于 html，其中包含了所有的静态元素内容。
uxml 使用 uss 决定其中 ui 元素的具体显示效果。

双击打开 uxml 时默认会自动打开可视化工具 ——UIBulider, 在 UiBulider 中进行可视化的数据操作。

# Ui 绑定

Ui 绑定文件类似于 JavaScript 代码

我们可以在代码中使用相关的 Api 对 Ui 元素和样式表进行操作，如下所示：

动态操作

	public class BagMgrWindow : EditorWindow
	{
	[MenuItem("Window/UI Toolkit/BagMgrWindow")]
	public static void ShowExample()
	{
	BagMgrWindow wnd = GetWindow<BagMgrWindow>();
	wnd.titleContent = new GUIContent("BagMgrWindow");
	}

	public void CreateGUI()
	{
	// Each editor window contains a root VisualElement object
	VisualElement root = rootVisualElement;

	// VisualElements objects can contain other VisualElement following a tree hierarchy.
	VisualElement label = new Label("Hello World! From C#");
	root.Add(label);

	// Import UXML
	var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/EditorWindows/BagMgrWindow.uxml");
	VisualElement labelFromUXML = visualTree.Instantiate();
	root.Add(labelFromUXML);

	// A stylesheet can be added to a VisualElement.
	// The style will be applied to the VisualElement and all of its children.
	var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/EditorWindows/BagMgrWindow.uss");
	VisualElement labelWithStyle = new Label("Hello World! With Style");
	labelWithStyle.styleSheets.Add(styleSheet);
	root.Add(labelWithStyle);
	}
	}

# Debug 工具

提供有 Ui 检查工具，其中可以查看 Ui 元素的显示状态和包围盒结构，树形结构等，类似 html 的浏览器 F12.

# 流程模板

	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 = "说明被点击了"; };
	}
	}

# 装备管理小案例

2022 年 11 月 21 日 10:32:00 更新
此案例为 Uitoolkit 练习，使用 Unity2021.3.11f1c2

# 初步设计

简单装备管理设计

其中涉及到 ListView 控件参考：[Unity - Manual: Create list and tree views (unity3d.com)](https://docs.unity3d.com/2022.1/Documentation/Manual/UIE-ListView-TreeView.html#:~:text=Create a list view 1 Right-click in the,the ListView control in the Hierarchy window. 更多项目)

++ 🔖值得注意的是：当因为修改脚本导致窗口无法打开时，可能是因为查找不到窗口的实例，在修正错误后，重启 Unity 编辑器才能正常打开窗体。++

# ListView 的使用

这里点击使用的是通用注册事件，同时也可以使用 ListView 的 OnValueChange 方法监听，在监听时获取不到 text 属性，可以在生成时将数据绑定到 viewDataKey 。

	var list = _rootMain.Q<ListView>();
	var data = new ArrayList() { "A", "B", "C" };
	list.itemsSource = data;
	list.makeItem = () => new Label();
	list.bindItem = (element, index) =>
	{
	((Label)element).text = data[index].ToString();
	element.viewDataKey = data[index].ToString();
	element.RegisterCallback<MouseDownEvent>((c) =>
	{
	Debug.Log($"点击了选项：{element.viewDataKey}");
	}, TrickleDown.TrickleDown);
	};