Unity新UI组件UIElements使用技巧

原文地址：https://blog.csdn.net/t163361/article/details/103487694

Unity的新UI组件UIElements出来一段时间了，最近做一个新功能的时候试用了下。使用过程中遇到很多问题，网上也查不到。整理到这里，方便后来人

UXML布局文件
UXML 是一个布局文件，控制界面上控件的排布方式
Unity提供了一个界面编辑工具UIBuilder，通过这个工具可以很方便的设置页面布局，和控件效果。当然了也可以只使用代码来实现布局。
USS制作ScrollView包含控件的滑过和选中效果
USS 是控件的外观文件，可以提供更精细的操作，比如高亮，选中效果和鼠标滑过的高光效果,USS文件很灵活，既可以针对整个界面设置，也可以针对某个小控件写个单独配置文件。
uss想要精细控制分两步
第一步 是加载布局文件可以在主element上调用 root.styleSheets.Add()来添加样式文件
第二步 针对单独控件应用样式控件调用AddToClassList来应用
下面的例子展示了控制ScrollView控件中每列元素的滑过，点中效果的配置方式

USS文件中的配置

	.file:hover {
	    background-color: rgb(178, 178, 178);
	}
	
	.file:focus {
	    background-color: rgb(62, 125, 231);
	}

C#代码中的调用

	tree.AddToClassList("file");

注意文件中是包含 . 这个符号的，但是代码中是没有的。
具体效果，也可以在UIBuilder中直观的调整USS文件

具体的文档可以参考
UIElements开发人员指南4 The UXML format（UXML格式）
UIElements开发人员指南9 样式(Style)和Unity样式表(style sheets)

USS加载中遇到的问题
USS文件既可以使用两种方式加载AssetDatabase和Resources

var style = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Examples/Editor/todolist.uss");
var style1 = Resources.Load<VisualTreeAsset>("Examples/Editor/todolist");

AssetDatabase后面需要调用全路径和后缀
Resources后不需要添加后缀，但是如果有重名的UXML文件的话，会导致加载样式文件失败

按钮添加有参数的回调函数
UIElements的事件机制很强大，可以自定义触发时间时，携带什么参数。
如下图为使用举例，ClipFile为传参类型，DeleteClip为注册的回调函数
RegisterCallback 按钮组件的回调注册函数，还有个对应的撤销注册函数

	public class ClipFile
	{
	    public int index;
	    public string path;
	}

	public void DeleteClip(MouseUpEvent mue, ClipFile cf)
	{
	    Debug.Log("DeleteClip");
	
	    if (File.Exists(cf.path))
	    {
	         File.Delete(cf.path);
	         AssetDatabase.Refresh();
	    }
	}

	//调用代码
	tree.Q<Button>("Delete").RegisterCallback<MouseUpEvent, ClipFile>(DeleteClip, clipFile);

具体文档可以参考
UIElements开发人员指南16 Responding to Events（事件响应)
5. Q函数
VisualElement包含一个Q<T>(“名字”)类似的查找函数，当加载完配置好的UXML后，可以使用这个函数查找对应的控件，很方便

官方提供的三个例子
UIElementsExamples
UIElementsUniteLATurretDemo
UIElementsUniteCPH2019RuntimeDemo 这个例子是在运行时下使用UIElements做界面的演示

Unity新UI组件UIElements使用技巧

猜你喜欢