您现在的位置是:首页 >技术交流 >UI Toolkit(2)网站首页技术交流

UI Toolkit(2)

童萌依然 2023-05-14 08:00:02
简介UI Toolkit(2)

USS和UXML

USS

USS (UIElements Style Sheets)是Unity的UI Toolkit中的一种样式表语言,用于定义UI元素的外观和布局。它是一种基于CSS的样式表语言,但是相比于CSS,它具有一些特定的语法和特性。

使用USS,可以通过将样式规则应用于UI元素来轻松地更改其外观和布局,从而使UI设计更加灵活和高效。USS支持诸如选择器、类、伪类、变量、函数、计算和嵌套规则等常见的CSS语法,也支持一些UI Toolkit特有的功能,例如锚点和网格布局等。

与CSS不同,USS具有一些针对UI Toolkit的特殊语法,例如像素对应单位,以及识别UI Toolkit特定的伪类和函数。USS还支持在运行时动态更改样式,这可以实现动态主题或用户自定义样式的实现。

总之,USS是一种强大的样式表语言,可以使UI设计师更加高效地创建和修改UI元素的样式和布局,同时也为开发人员提供了一种方便的方法来管理UI样式和主题。

/*C# type选择器:按钮元素*/
Button {
    border-radius: 33px;
    width: 100px;
}

/*Pseudo-Class(伪类) ":hover"*/
Button:hover {
    border-radius: 11px;
    width: 100px;
}

/*根伪类*/
:root {
    height: 300px;
}

/*name选择器:名为"Cancel"的元素*/
#Cancel {
    width: 190px;
    border-width: 2px;
    border-color: DarkRed;
    background-color: LightGreen;
}

/*class选择器:添加了此class的元素*/
.ClassName{
    background-color: yellow;
    height: 55px;
}

/*通用选择器*/
*{
    background-color: lightblue;
}

/*Descendant(后代)选择器(中间有个空格!):第一个选择器的结果,第二个选择器匹配其所有后代元素*/
#descendant1 .descendant2 {
    background-color: yellow;
}

/*Child选择器:第一个选择器的结果,第二个选择器只匹配其直接子节点元素*/
#child1 > .child2 {
    background-color: yellow;
}

/*Multiple选择器:选择满足所有选择器的元素*/
.multiple1.multiple2 {
    background-color: yellow;
}

代码取自链接: [UNITY二三事_002] UIToolkit–USS总结笔记

UXML

UXML (UIElements XML)是Unity的UI Toolkit中的一种XML语言,用于创建和定义UI元素的层次结构和属性。与USS样式表不同,UXML专注于UI元素的结构和属性定义,而不是样式和布局。

使用UXML,可以通过定义XML元素和属性来构建UI界面。每个UXML元素都对应着UIElements库中的VisualElement类,其属性和子元素对应着VisualElement的属性和子元素。

UXML提供了类似HTML和XML的语法,其中包括元素、属性和值。与HTML和XML不同,UXML支持使用Unity引擎中定义的类型和枚举类型,例如Vector2和Color等。

与USS一样,UXML可以在运行时动态加载和修改,这使得UI界面的创建和修改变得更加灵活和高效。同时,UXML也可以与USS样式表相结合,从而实现更加复杂的UI设计和实现。

总之,UXML是一种用于构建和定义UI元素层次结构和属性的XML语言,它与UI Toolkit的VisualElement紧密结合,可以帮助UI设计师和开发人员更加高效地创建和修改UI界面。

同样的javaScript脚本也和Unity中使用C#脚本一样了,通过这些如果你学习过前端,那么你也可以熟练的使用这些来编辑你想要的UI了

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。