【Unity3D】UI Toolkit样式选择器

1 前言

        UI Toolkit简介 中介绍了样式属性，UI Toolkit容器 和 UI Toolkit元素 中介绍了容器和元素，本文将介绍样式选择器（Selector），主要包含样式类选择器（Class Selector）、C# 类选择器（Type Selector）、名称选择器（Name Selector）、通用选择器（Universal Selector）、后代选择器（Descendant Selector）、子选择器（Child Selector）、多重选择器（Multiple Selector）、伪类选择器（Pseudo Class）等。样式选择器官方介绍见→USS selectors。

2 简单选择器（Simple Selector） 

        简单选择器优先级：

//       *         <    C# Type    <     .Name      <    #Name
//   通用选择器     <   C#类选择器   <   样式类选择器  <  名称选择器
Universal Selector < Type Selector < Class Selector < Name Selector

2.1 样式类选择器（Class Selector）

        Class 选择器是命名以 "." 号开头的选择器（如：.red、.abc、.xyz 等），需要手动绑定到元素上，官方介绍见→Class selectors。

        1）创建 UI

        在 UI Builder 的 Hierarchy 窗口中创建 UI 如下。

        显示如下。 

        2）创建 USS 文件

        在 StyleSheets 窗口点击 "+" 号，选择 Create New USS 选项，如下。选择 USS 文件保存路径，命名为 StyleSelectorDemo。

        3）创建选择器

        在 StyleSheets 窗口的 selector 框中输入 ".textColor"，如下。注意：textColor 前面有个点，命名可以随意，如：demo、test 等都行。

        按 Enter 键后，创建了 selector，如下。

        4）修改选择器的属性

        选中 ".textColor" 选择器，在 Inspector 窗口修改文本颜色，如下。

        5）绑定选择器到元素

        将 ".textColor" 选择器拖拽到 Hierarchy 或 Viewport 窗口中相关元素上，实现样式选择器与元素的绑定。

        也可以通过以下方式绑定元素：选中元素后，在 Inspector 窗口的 Style Class List 中添加 selector，如下。 

        选择器绑定到元素后，在 Inspector 窗口可以看到元素绑定的选择器，如下。可以通过后面的 "x" 号删除选择器。

        6）显示效果

        Label 和 Button 都手动绑定了 ".textColor" 选择器，显示效果如下。 

2.2 C# 类选择器（Type Selector）

        Type 选择器是以元素的 C# 类名命名的选择器（如：Label、Button、VisualElement 等），会自动绑定到对应 Type 的元素上，不需要手动绑定，官方介绍见→Type selectors。

        1）创建选择器

        在 StyleSheets 窗口创建名为 "Label" 的选择器，如下。

        2）修改选择器的属性

        选中 "Label" 选择器，在 Inspector 窗口修改文本样式为斜体，如下。

        3）显示效果

        Label 元素会自动绑定 "Label" 选择器，Button 元素则不会，即使手动将 "Label" 选择器拖拽到 Button 元素上，也不会绑定成功。显示效果如下。

2.3 名称选择器（Name Selector）

        Name 选择器是命名以 "#" 号开头的选择器（如：#Name、#Abc、#Xyz 等），会自动绑定到对应 Name 的元素上，不需要手动绑定，官方介绍见→Name selectors。

        1）修改元素名

        新创建的元素默认元素名为空，修改元素名如下。

        2）创建选择器

        在 StyleSheets 窗口创建名为 "Button1" 的选择器，如下。

        3）修改选择器的属性 

        选中 "Button1" 选择器，在 Inspector 窗口修改背景颜色，如下。 

        4）显示效果

        Button1 元素会自动绑定 "Button1" 选择器，Label1 元素则不会，即使手动将 "Button1" 选择器拖拽到 Label1 元素上，也不会绑定成功。显示效果如下。

2.4 通用选择器（Universal Selector）

        Universal 选择器是以 "*" 号命名的选择器，会自动绑定到所有元素上，不需要手动绑定，官方介绍见→Universal selectors。

        1）创建选择器

        在 StyleSheets 窗口创建名为 "*" 的选择器，如下。

        2）修改选择器的属性 

        选中 "*" 选择器，在 Inspector 窗口修改边框宽度和颜色，如下。 

        3）显示效果

        所有元素都会自动绑定 "*" 选择器，显示效果如下。

3 复杂选择器（Complex Selector） 

        复杂选择器是指由多个简单选择器按照特定规则组合而成的选择器。

3.1 后代选择器（Descendant Selector）

        Descendant 选择器由多个简单选择器通过空格连接而成，它匹配的是某个 UI 元素底下符合规则的所有层级的子元素，官方介绍见→Descendant selectors。

// 在selector1匹配的子元素中匹配selector2, ...
// 选择器的顺序不同匹配的元素也不同
selector1 selector2 {...}

        1）UI 搭建

        UI 层级结构如下，其中 Background、VE1、VE2、VE3 都是 VisualElement，Label1、Label2、Label3 都是 Label。

        创建以下简单选择器。其中，Lable 选择器中修改了字体大小为 30；.red 选择器中修改了背景颜色为红色，并绑定到 VE1，.green 选择器中修改了背景颜色为绿色，并绑定到 VE2；.blue 选择器中修改了背景颜色为蓝色，并绑定到 VE3。

        UI 显示如下。

        2）创建 Descendant 选择器

        在 StyleSheets 窗口创建以下选择器。

  • "#VE1 Label" 选择器：修改字体为斜体；
  • ".green Label" 选择器：修改字体颜色为黑色；
  • "#Background *" 选择器：设置 3px 的黄色边框。

        3）显示效果

        可以看到，"#VE1 Label" 选择器匹配的是 Label1 元素，".green Label" 选择器匹配的是 Label2 元素，"#Background *" 选择器匹配的是 VE1、VE2、VE3、Label1、Label2、Label3 元素。

3.2 子选择器（Child Selector）

        Child 选择器由多个简单选择器通过 " > " 连接而成，它匹配的是某个 UI 元素底下符合规则的第一层级的子元素，官方介绍见→Child selectors。

// 在selector1匹配的子元素中匹配selector2, ...
// 选择器的顺序不同匹配的元素也不同
selector1 > selector2 {...}

        1）UI 搭建

        同 3.1 1）节。

        2）创建 Child 选择器

        在 StyleSheets 窗口创建以下选择器。

  • "#VE1 > Label" 选择器：修改字体为斜体；
  • ".green > Label" 选择器：修改字体颜色为黑色；
  • "#Background > *" 选择器：设置 3px 的黄色边框。

        3）显示效果

        可以看到，"#VE1 > Label" 选择器匹配的是 Label1 元素，".green > Label" 选择器匹配的是 Label2 元素，"#Background > *" 选择器匹配的是 VE1、VE2、VE3 元素。

3.3 多重选择器（Multiple Selector）

        Multiple 选择器由多个简单选择器直接而成，它匹配的是符合所有规则的元素，官方介绍见→Multiple selectors。

// 匹配同时满足selector1、selector2、...的元素
// 选择器的顺序不同匹配的元素相同
selector1selector2 {...}

        说明：Class 选择器可以通过 "." 区分，Name 选择器可以通过 "#" 区分，Type 选择器没有区分符号，因此，一个多重选择器中最多允许有一个 Type 选择器，并且必须放在第一位。 

        1）UI 搭建

        同 3.1 1）节。

        2）创建 Multiple 选择器

        在 StyleSheets 窗口创建以下选择器。

  • "Label#Label1" 选择器：修改字体为斜体；
  • "VisualElement.green" 选择器：设置圆角半径 Radius 为 20 px；
  • "Label*" 选择器：设置 3px 的黄色边框。

        3）显示效果

        可以看到，"Label#Label1" 选择器匹配的是 Label1 元素，"VisualElement.green" 选择器匹配的是 VE2 元素，"Label*" 选择器匹配的是 Label1、Label1、Label3 元素。

4 伪类选择器（Pseudo Class）

        Pseudo 选择器是指由简单选择器和状态符连接而成，它匹配的是特定状态下的元素，官方介绍见→Pseudo-classes。

// 匹配满足selector且进入state状态的元素
selector:state {...}

        状态符主要以下几种。

  • :hover：光标悬浮在元素上。
  • :active：用户与元素交互。
  • :inactive：用户停止与元素交互。
  • :focus：元素获得焦点。
  • :disabled：元素进入 disabled 状态。
  • :enabled：元素进入 enabled 状态。
  • :checked：Toggle 或 RadioButton 被选中。
  • :root：元素成为根元素。

        1）UI 搭建

        同 3.1 1）节。

        2）创建 Pseudo 选择器

        在 StyleSheets 窗口创建以下选择器。

  • "#Label1:hover" 选择器：修改字体为斜体；
  • ".green:hover" 选择器：设置圆角半径 Radius 为 20 px；
  • "*:hover" 选择器：设置 3px 的黄色边框。

        3）显示效果

         可以看到，"#Label1:hover" 选择器匹配的是进入 hover 状态的 Label1 元素，".green:hover" 选择器匹配的是进入 hover 状态的 VE2 元素，"*:hover" 选择器匹配的是进入 hover 状态的 VE1、VE2、VE3、Label1、Label1、Label3 元素。

5 样式切换

        1）样式选择器的添加和删除

// 如果visualElement有StyleName样式, 就将其删除; 如果visualElement没有StyleName样式, 就将其添加
visualElement.ToggleInClassList("StyleName"); // StyleName是样式选择器名, 不需要前面的"."

        说明：只能添加和删除样式类选择器（以 "." 命名开头的选择器），其他选择器都是自动绑定到元素上的。  

        2）uss 样式文件替换

VisualElement root = GetComponent<UIDocument>().rootVisualElement; // 根容器
VisualElementStyleSheetSet styleSheetSet = root.styleSheets; // 样式集合
styleSheetSet.Remove(oldStyleSheet); // 移除旧样式, oldStyleSheet是StyleSheet类型变量, 指向一个uss文件
styleSheetSet.Add(newlightTheme); // 添加新样式, newStyleSheet是StyleSheet类型变量, 指向一个uss文件

6 样式应用

        本节将实现亮主题和暗主题的切换，完整资源见→Unity3D切换样式主题。 

        Page.uxml

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False"><Style src="project://database/Assets/SwitchTheme/StyleSheets/LightTheme.uss?fileID=7433441132597879392&amp;guid=b86be23b06b471b43a7ea453aed7df74&amp;type=3#LightTheme" /><ui:VisualElement name="Background" class="bgColor" style="flex-direction: row; flex-grow: 1; background-image: url(&apos;project://database/Assets/SwitchTheme/Textures/Background_Sky.png?fileID=2800000&amp;guid=49e1c76bfa6ef0546a39fd2bceb69b9a&amp;type=3#Background_Sky&apos;);"><ui:VisualElement name="Left" style="flex-grow: 0; border-right-width: 2px; border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); flex-basis: 30%;"><ui:VisualElement name="Top" class="dark top" style="flex-basis: 30%; margin-bottom: 0; border-bottom-width: 2px; border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0);" /><ui:VisualElement name="Middle" style="flex-basis: auto; flex-grow: 1;"><ui:Label text="Label" display-tooltip-when-elided="true" class="item middleBg middle" style="flex-grow: 1; -unity-text-align: middle-center; font-size: 60px; flex-shrink: 1; margin-top: 5px; margin-bottom: 5px;" /><ui:Label text="Theme" display-tooltip-when-elided="true" name="Theme" class="item middle" style="flex-grow: 1; -unity-text-align: middle-center; font-size: 60px; flex-shrink: 1; margin-top: 5px; margin-bottom: 5px;" /><ui:RadioButtonGroup value="-1" choices="Light,Drak" name="SwitchTheme" class="middle hide" style="flex-grow: 0; font-size: 45px; -unity-text-align: middle-center; align-items: center; justify-content: center; flex-direction: column; margin-left: 0; margin-right: 0; margin-top: 5px; margin-bottom: 5px; flex-shrink: 1;" /><ui:Label text="Label" display-tooltip-when-elided="true" class="item middle" style="flex-grow: 1; -unity-text-align: middle-center; font-size: 60px; flex-shrink: 1; margin-top: 5px; margin-bottom: 5px;" /></ui:VisualElement><ui:VisualElement name="Bottom" style="flex-basis: 25%; border-top-width: 2px; border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0);"><ui:Label text="Bottom" display-tooltip-when-elided="true" style="flex-shrink: 1; flex-grow: 1; font-size: 100px; -unity-text-align: middle-center;" /></ui:VisualElement></ui:VisualElement><ui:VisualElement name="Right" style="flex-grow: 0; flex-basis: 70%; align-items: center; justify-content: center;"><ui:Label text="Work Space" display-tooltip-when-elided="true" class="right" /></ui:VisualElement></ui:VisualElement>
</ui:UXML>

        LightTheme.uss

Label {color: rgb(48, 47, 47);
}RadioButton:hover {background-color: rgb(217, 217, 217);
}.unity-radio-button__checkmark-background {margin-right: 10px;width: 30px;height: 30px;justify-content: center;align-items: center;border-left-width: 1px;border-right-width: 1px;border-top-width: 1px;border-bottom-width: 1px;border-top-left-radius: 20px;border-bottom-left-radius: 20px;border-top-right-radius: 20px;border-bottom-right-radius: 20px;background-color: rgb(43, 43, 43);border-left-color: rgba(248, 242, 242, 255);border-right-color: rgba(248, 242, 242, 255);border-top-color: rgba(248, 242, 242, 255);border-bottom-color: rgba(248, 242, 242, 255);padding-top: 0;
}.unity-radio-button__checkmark {width: 15px;height: 15px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;justify-content: center;align-items: center;background-color: rgb(217, 213, 213);
}.bgColor {-unity-background-image-tint-color: rgb(255, 255, 255);
}.top {background-image: url('project://database/Assets/SwitchTheme/Textures/unity_dark.png?fileID=2800000&guid=49ee81a1e2e15df46968d5d1978abc12&type=3#unity_dark');-unity-background-scale-mode: scale-to-fit;
}.middle {background-color: rgba(0, 239, 255, 0.39);
}.right {-unity-text-align: middle-center;-unity-font-style: bold;font-size: 200px;color: rgb(0, 168, 255);justify-content: center;align-items: center;-unity-text-outline-width: 1px;-unity-text-outline-color: rgb(255, 31, 0);text-shadow: 5px 2px 1px rgb(255, 255, 255);
}.hide {display: none;
}.item:hover {background-color: rgb(58, 56, 56);color: rgb(219, 216, 216);
}.middle {background-color: rgba(0, 239, 255, 0.39);
}

        DarkTheme.uss

Label {color: rgb(212, 212, 212);
}RadioButton:hover {background-color: rgb(38, 38, 38);
}.unity-radio-button__checkmark-background {margin-right: 10px;width: 30px;height: 30px;justify-content: center;align-items: center;border-left-width: 1px;border-right-width: 1px;border-top-width: 1px;border-bottom-width: 1px;border-top-left-radius: 20px;border-bottom-left-radius: 20px;border-top-right-radius: 20px;border-bottom-right-radius: 20px;background-color: rgb(255, 255, 255);padding-top: 0;
}.unity-radio-button__checkmark {width: 15px;height: 15px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;justify-content: center;align-items: center;background-color: rgb(51, 50, 50);
}.bgColor {-unity-background-image-tint-color: rgb(132, 132, 132);
}.top {background-image: url('project://database/Assets/SwitchTheme/Textures/unity_light.png?fileID=2800000&guid=92a215376eed0c9498000506d15b4afe&type=3#unity_light');-unity-background-scale-mode: scale-to-fit;
}.middle {background-color: rgba(46, 44, 44, 0.39);
}.right {-unity-text-align: middle-center;-unity-font-style: bold;font-size: 200px;color: rgb(197, 194, 194);justify-content: center;align-items: center;-unity-text-outline-width: 1px;-unity-text-outline-color: rgb(255, 216, 0);text-shadow: 5px 2px 1px rgb(53, 52, 52);
}.hide {display: none;
}.item:hover {background-color: rgb(214, 211, 211);color: rgb(46, 45, 45);
}

        SwitchTheme.cs

using UnityEngine;
using UnityEngine.UIElements;public class SwitchTheme : MonoBehaviour {private VisualElement root; // 根容器private RadioButtonGroup switchThemeElement; // 切换主题元素private VisualElementStyleSheetSet styleSheetSet; // 主题集合[SerializeField] private StyleSheet lightTheme; // 亮主题, 指向LightTheme.uss文件[SerializeField] private StyleSheet darkTheme; // 暗主题, 指向DarkTheme.uss文件private void Awake() {root = GetComponent<UIDocument>().rootVisualElement;styleSheetSet = root.styleSheets;Label themeLabel = root.Q<Label>("Theme");themeLabel.RegisterCallback<ClickEvent>(OnClick);switchThemeElement = root.Q<RadioButtonGroup>("SwitchTheme");switchThemeElement.RegisterValueChangedCallback(OnValueChanged);}private void OnClick(ClickEvent e) { // 点击回调函数switchThemeElement.ToggleInClassList("hide");}private void OnValueChanged(ChangeEvent<int> e) { // value变化回调函数if (e.newValue == 0) { // 切换为亮主题styleSheetSet.Remove(darkTheme);styleSheetSet.Add(lightTheme);} else { // 切换为暗主题styleSheetSet.Remove(lightTheme);styleSheetSet.Add(darkTheme);}}
}

        运行效果如下。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/99779.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

2 | Window 搭建单机 Hadoop 和Spark

2 | Window 搭建单机 Hadoop 和Spark

搭建单机 Hadoop 和 Spark 环境可以学习和测试大数据处理的基础知识。在 Windows 操作系统上搭建这两个工具需要一些配置和设置，下面是一个详细的教程： 注意： 在开始之前，请确保你已经安装了 Java 开发工具包（JDK），并且已经下载了 Hadoop 和 Spark 的最新版本。你可以从…
阅读更多...
准备HarmonyOS开发环境

准备HarmonyOS开发环境

引言 在开始 HarmonyOS 开发之前&#xff0c;需要准备好开发环境。本章将详细指导你如何安装 HarmonyOS SDK、配置开发环境、创建 HarmonyOS 项目。 目录 安装 HarmonyOS SDK 配置开发环境 创建 HarmonyOS 项目 总结 1. 安装 HarmonyOS SDK HarmonyOS SDK 是开发 Harmo…
阅读更多...
基于Matlab分析的电力系统可视化研究

基于Matlab分析的电力系统可视化研究

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
精益制造、质量管控，盛虹百世慧共同启动MOM（制造运营管理）

精益制造、质量管控，盛虹百世慧共同启动MOM（制造运营管理）

百世慧科技依托在电池智能制造行业中的丰富经验&#xff0c;与盛虹动能达成合作&#xff0c;为其提供MOM制造运营管理平台&#xff0c;并以此为起点&#xff0c;全面提升盛虹动能的制造管理水平与运营体系。 行业困境 中国动力电池已然发展为全球最大的电池产业&#xff0c;但…
阅读更多...
RK3568-i2c-适配8010rtc时钟芯片

RK3568-i2c-适配8010rtc时钟芯片

硬件连接 从硬件原理图中可以看出&#xff0c;rtc时钟芯片挂载在i2c3总线上&#xff0c;设备地址需要查看芯片数据手册。编写设备树 &i2c3 {status "okay";rx8010: rx801032 {compatible "epson,rx8010";reg <0x32>;}; };使能驱动 /kernel/…
阅读更多...
基于jeecg-boot的flowable流程自定义业务退回撤回或驳回到发起人后的再次流程提交

基于jeecg-boot的flowable流程自定义业务退回撤回或驳回到发起人后的再次流程提交

更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a; https://gitee.com/nbacheng/nbcio-boot 前端代码&#xff1a;https://gitee.com/nbacheng/nbcio-vue.git 在线演示&#xff08;包括H5&#xff09; &#xff1a; http://122.227.135.243:9888 主要…
阅读更多...
嵌入式软件有限状态机的 C 语言实现

嵌入式软件有限状态机的 C 语言实现

状态机模式是一种行为模式&#xff0c;通过多态实现不同状态的调转行为的确是一种很好的方法&#xff0c;只可惜在嵌入式环境下&#xff0c;有时只能写纯C代码&#xff0c;并且还需要考虑代码的重入和多任务请求跳转等情形&#xff0c;因此实现起来着实需要一番考虑。 近日在看…
阅读更多...
鼠标知识系列之星闪鼠标

鼠标知识系列之星闪鼠标

随着 2023.8.4 华为 HDC 大会的落幕&#xff0c;一个新的名词开始进入了人们的视线&#xff1a;星闪 NaerLink&#xff0c;随着星闪技术引入键鼠圈子的还有一个名词&#xff1a;星闪鼠标。 正如我们之前鼠标知识分享系列提到过的&#xff0c;目前市面上的鼠标主要是有线鼠标和…
阅读更多...
【管理运筹学】第 7 章 | 图与网络分析（1，图论背景以及基本概念、术语、矩阵表示）

【管理运筹学】第 7 章 | 图与网络分析（1，图论背景以及基本概念、术语、矩阵表示）

文章目录 引言一、图与网络的基本知识1.1 图与网络的基本概念1.1.1 图的定义1.1.2 图中相关术语1.1.3 一些特殊图类1.1.4 图的运算 1.2 图的矩阵表示1.2.1 邻接矩阵1.2.2 可达矩阵1.2.3 关联矩阵1.2.4 权矩阵 写在最后 引言 按照正常进度应该学习动态规划了&#xff0c;但我想…
阅读更多...
深圳-海岸城购物中心数据分析

深圳-海岸城购物中心数据分析

做数据分析的时候&#xff0c;如果要对商场进行分析&#xff0c;可以从这些数据纬度进行分析&#xff0c;如下图所示&#xff1a; 截图来源于数位观察&#xff1a;https://www.swguancha.com/
阅读更多...
数学建模--Topsis评价方法的Python实现

数学建模--Topsis评价方法的Python实现

目录 1.算法流程简介 2.算法核心代码 3.算法效果展示 1.算法流程简介 """ TOPSIS(综合评价方法):主要是根据根据各测评对象与理想目标的接近程度进行排序. 然后在现有研究对象中进行相对优劣评价。 其基本原理就是求解计算各评价对象与最优解和最劣解的距离…
阅读更多...
C# 子类如何访问子类的方法（同一父类）

C# 子类如何访问子类的方法（同一父类）

在继承关系中&#xff0c;子类可以通过创建另一个子类的对象来访问其方法。下面是一个示例&#xff0c;展示了子类如何访问另一个子类的方法&#xff1a; public class Animal {public virtual void Speak(){Console.WriteLine("我是动物。");} }public class Cat :…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023