1 前言

UI Toolkit简介 中介绍了 UI Builder、样式属性、UQuery、Debugger,UI Toolkit容器 中介绍了 VisualElement、ScrollView、ListView、GroupBox 等容器,UI Toolkit样式选择器 中介绍了简单选择器、复杂选择器、伪类选择器等样式选择器,本文将介绍 UI Toolkit 中的元素,主要包含 Label、Button、TextField、Toggle、Radio Button、Slider、Progress Bar、Dropdown、Foldout 等,官方介绍详见→UXML elements referenceStructure UI examples

2 Label(标签)

​ Label 官方介绍见→UXML element Label

1)属性介绍

  • View Data Key:用于视图数据持久化(如:树展开状态、滚动位置、缩放级别),作为视图数据保存 / 加载的键,如果不设置此键将禁用该元素的持久性。
  • Picking Mode:判断是否可以在 mouseEvents 期间选择此容器。
  • Tooltip:鼠标悬停到该容器上时弹出的提示文字。
  • Usage Hints:预期使用模式,便于系统加速某些操作。
  • Tab Index:用于对焦点环中的焦点对象进行排序。
  • Focusable:容器是否能获得焦点。
  • BindingPath:目标属性绑定的路径。
  • Text:标签的文本内容。
  • Enable Rich Text:是否支持富文本。
  • Display Tooltip When Elided:悬停提示是否显示省略文本的完整版本。

​ 说明:View Data Key、Picking Mode、Tooltip、Usage Hints、Tab Index、Focusable、BindingPath 都是基类属性,后文若出现这些属性将不再赘述。

2)富文本应用

​ 当支持富文本时,在 text 中输入以下富文本,显示如下。

<b>Hello</b> <color=green>World</color>

3 Button(按钮)

​ Button 官方介绍见→UXML element Button

1)属性介绍

  • Text:按钮的文本内容。
  • Enable Rich Text:是否支持富文本。
  • Display Tooltip When Elided:悬停提示是否显示省略文本的完整版本。

2)事件响应

​ ButtonDemo.cs

using UnityEngine;
using UnityEngine.UIElements; public class ButtonDemo : MonoBehaviour {
private void Awake() {
VisualElement root = GetComponent<UIDocument>().rootVisualElement;
Button button = root.Q<Button>();
button.clicked += OnClick;
} private void OnClick() {
Debug.Log("Clicked");
}
}

4 TextField(输入文本)

​ TextField 官方介绍见→UXML element TextField

1)属性介绍

  • Label:标签。
  • Value:输入文本,修改此值不会触发事件。
  • Max Length:输入文本最大长度,-1 表示长度不受限。
  • Password:是否为密码,如果是密码,将使用 Mask Character 中的字符显示,默认使用 "*" 显示。
  • Mask Character:当输入的文本是密码时,替换显示的字符。
  • Text:输入文本,修改此值会触发事件,并且会将文本同步到 value 中。
  • Readonly:输入文本是否是只读的。
  • Is Delayed:是否延时更新 value,如果延时更新,则在用户按 Enter 或输入文本失焦后才更新 value 属性。
  • Multiline:是否允许多行输入。

2)事件响应

​ TextFieldDemo.cs

using UnityEngine;
using UnityEngine.UIElements; public class TextFieldDemo : MonoBehaviour {
private void Awake() {
VisualElement root = GetComponent<UIDocument>().rootVisualElement;
TextField textField = root.Q<TextField>();
textField.isDelayed = true; // 延时更新value, 在用户按Enter或输入文本失焦后才更新value属性
textField.RegisterValueChangedCallback(OnValueChanged);
} private void OnValueChanged(ChangeEvent<string> e) { // 输入回调事件
Debug.Log("previousValue=" + e.previousValue + ", newValue=" + e.newValue);
}
}

5 Toggle(复选框)

​ Toggle 官方介绍见→UXML element Toggle

1)属性介绍

  • Label:复选框标签。
  • Value:复选框的选中状态。
  • Text:复选框后面的文本。

2)事件响应

​ ToggleDemo.cs

using UnityEngine;
using UnityEngine.UIElements; public class ToggleDemo : MonoBehaviour {
private VisualElement root; // 根容器
private GroupBox groupBox; // 分组盒子
private string[] toggleLabel = new string[] {"First", "Second", "Third", "Fourth"}; // toggle的标签 private void Awake() {
root = GetComponent<UIDocument>().rootVisualElement;
groupBox = root.Q<GroupBox>();
groupBox.text = "ToggleDemo";
groupBox.style.fontSize = 50;
root.Add(groupBox);
for (int i = 0; i < toggleLabel.Length; i++) {
AddToggle(i);
}
} private void AddToggle(int index) { // 添加单选项
Toggle toggle = new Toggle();
toggle.text = toggleLabel[index];
toggle.style.fontSize = 50;
VisualElement ve = toggle.Query<VisualElement>().AtIndex(2);
ve.style.marginRight = 10;
toggle.RegisterValueChangedCallback(e => OnValueChanged(index, e));
groupBox.Add(toggle);
} private void OnValueChanged(int index, ChangeEvent<bool> e) { // value变化回调函数
Debug.Log("index=" + index + ", previousValue=" + e.previousValue + ", newValue=" + e.newValue);
}
}

​ 运行后,点击 Second、Third,显示如下。

​ 打印日志如下。

6 RadioButton(单选框)

​ RadioButton 官方介绍见→UXML element RadioButton

1)属性介绍

  • Label:单选框标签。
  • Value:单选框的选中状态。
  • Text:单选框后面的文本。

2)事件响应

​ RadioButtonDemo.cs

using UnityEngine;
using UnityEngine.UIElements; public class RadioButtonDemo : MonoBehaviour {
private VisualElement root; // 根容器
private GroupBox groupBox; // 分组盒子
private string[] choiceLabel = new string[] {"First", "Second", "Third", "Fourth"}; // choice的标签 private void Awake() {
root = GetComponent<UIDocument>().rootVisualElement;
groupBox = root.Q<GroupBox>();
groupBox.text = "RadioButtonDemo";
groupBox.style.fontSize = 50;
root.Add(groupBox);
for (int i = 0; i < choiceLabel.Length; i++) {
AddChoice(i);
}
} private void AddChoice(int index) { // 添加单选项
RadioButton choice = new RadioButton();
choice.text = choiceLabel[index];
choice.style.fontSize = 50;
VisualElement ve = choice.Query<VisualElement>().AtIndex(2);
ve.style.marginRight = 10;
choice.RegisterValueChangedCallback(e => OnValueChanged(index, e));
groupBox.Add(choice);
} private void OnValueChanged(int index, ChangeEvent<bool> e) { // 选项变化回调函数
Debug.Log("index=" + index + ", previousValue=" + e.previousValue + ", newValue=" + e.newValue);
}
}

​ 运行后,点击 Second,显示如下。

​ 打印日志如下。

7 RadioButtonGroup(单选按钮组)

​ RadioButtonGroup 官方介绍见→UXML element RadioButtonGroup

1)属性介绍

  • Label:单选按钮组标签。
  • Value:当前选中的单选按钮索引。
  • Choices:单选按钮后面的文本,通过 "," 隔开的字符串数组。

2)配置单选按钮组

​ 配置 RadioButtonGroup 如下。

​ 展开 RadioButtonGroup,发现其下自动添加了 4 个 RadioButton,如下。

​ 显示如下。

3)事件响应

​ RadioButtonGroupDemo.cs

using UnityEngine;
using UnityEngine.UIElements; public class RadioButtonGroupDemo : MonoBehaviour {
private VisualElement root; // 根容器
private string[] choices = new string[] {"First", "Second", "Third", "Fourth"}; // choices的标签 private void Awake() {
root = GetComponent<UIDocument>().rootVisualElement;
RadioButtonGroup group = root.Q<RadioButtonGroup>();
group.label = "";
group.choices = choices;
group.style.fontSize = 50;
group.RegisterValueChangedCallback(OnValueChanged);
} private void OnValueChanged(ChangeEvent<int> e) { // value变化回调函数
Debug.Log("previousValue=" + e.previousValue + ", newValue=" + e.newValue);
}
}

​ 运行后,点击 Second,显示如下。

​ 打印日志如下。

8 Slider 和 SliderInt(滑动条)

​ Slider 官方介绍见→UXML element Slider,SliderInt 官方介绍见→UXML element SliderInt

1)属性介绍

  • Label:滑动条标签。
  • Value:滑动条的数值。
  • Low Value:滑动条的最小值。
  • High Value:滑动条的最大值。
  • Page Size:单击滑动条时,Value 的变化量;Page Size取 0 时,单击滑动条,value 取鼠标位置的滑动数值。
  • Show Input Field:显示滑动条的数值。
  • Direction:滑动条的方向,取值有 Horizontal(水平的)、Vertical(垂直的)。
  • Inverted:随 value 值的增大,滑动条反向增长。

2)事件响应

​ SliderDemo.cs

using UnityEngine;
using UnityEngine.UIElements; public class SliderDemo : MonoBehaviour {
private VisualElement root; // 根容器 private void Awake() {
root = GetComponent<UIDocument>().rootVisualElement;
Slider slider = root.Q<Slider>();
slider.style.width = 500;
slider.RegisterValueChangedCallback(OnValueChanged);
} private void OnValueChanged(ChangeEvent<float> e) { // value变化回调函数
Debug.Log("previousValue=" + e.previousValue + ", newValue=" + e.newValue);
}
}

​ 运行后,滑动滑块,打印日志如下。

9 ProgressBar(进度条)

​ ProgressBar 官方介绍见→UXML element ProgressBar

1)属性介绍

  • Low Value:进度条的最小值。
  • High Value:进度条的最大值。
  • Title:进度条中间的标题。

2)事件响应

​ ProgressBarDemo.cs

using System.Collections;
using UnityEngine;
using UnityEngine.UIElements; public class ProgressBarDemo : MonoBehaviour {
private VisualElement root; // 根容器
private ProgressBar progressBar; // 进度条 private void Awake() {
root = GetComponent<UIDocument>().rootVisualElement;
progressBar = root.Q<ProgressBar>();
progressBar.style.width = 500;
progressBar.value = progressBar.lowValue;
progressBar.Query<VisualElement>().AtIndex(2).style.backgroundColor = Color.grey; // 进度条背景色
progressBar.Query<VisualElement>().AtIndex(3).style.backgroundColor = Color.green; // 进度条颜色
progressBar.RegisterValueChangedCallback(OnValueChanged);
StartCoroutine(Progress());
} private IEnumerator Progress() { // 更新进度条
while (progressBar.value < progressBar.highValue) {
progressBar.value += 0.2f;
yield return null;
}
} private void OnValueChanged(ChangeEvent<float> e) { // value变化回调函数
Debug.Log("previousValue=" + e.previousValue + ", newValue=" + e.newValue);
}
}

​ 说明:这里通过协程更新进度条(协程的介绍详见→协同程序),在 OnValueChanged 中打印进度条的进度。

​ 运行效果如下。

10 Dropdown(下拉列表)

​ Dropdown 官方介绍见→UXML element DropdownField

1)属性介绍

  • Label:下拉列表标签。
  • Index:选中的选项的索引。
  • Choices:选项的文本,通过 "," 隔开的字符串数组。

2)配置下拉列表

​ 配置 Dropdown 如下。

​ 显示如下。

3)事件响应

​ DropdownDemo.cs

using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UIElements; public class DropdownDemo : MonoBehaviour {
private VisualElement root; // 根容器
private List<string> choices = new List<string> {"First", "Second", "Third", "Fourth"}; // choices的标签 private void Awake() {
root = GetComponent<UIDocument>().rootVisualElement;
DropdownField dropdown = root.Q<DropdownField>();
dropdown.style.width = 600;
dropdown.choices = choices;
dropdown.RegisterValueChangedCallback(OnValueChanged);
} private void OnValueChanged(ChangeEvent<string> e) { // value变化回调函数
Debug.Log("previousValue=" + e.previousValue + ", newValue=" + e.newValue);
}
}

​ 运行后,点击 Second,显示如下。

​ 打印日志如下。

11 Foldout(折叠列表)

​ Foldout 官方介绍见→UXML element Foldout

1)属性介绍

  • Text:折叠列表文本。
  • Value:折叠列表的展开状态,true 表示展开,false 表示收缩。

2)添加元素

​ 将元素拖拽到 Foldout 上,会自动放在其 unity-content 元素下面,如下。

​ 显示如下。

3)事件响应

using UnityEngine;
using UnityEngine.UIElements; public class FoldoutDemo : MonoBehaviour {
private VisualElement root; // 根容器
private Foldout foldout; // 折叠列表
private string[] items = new string[] {"First", "Second", "Third", "Fourth"}; // items的标签 private void Awake() {
root = GetComponent<UIDocument>().rootVisualElement;
foldout = root.Q<Foldout>();
for(int i = 0; i < items.Length; i++) {
AddItems(items[i]);
}
foldout.RegisterValueChangedCallback(OnValueChanged);
} private void AddItems(string text) {
Label label = new Label(text);
foldout.Add(label);
} private void OnValueChanged(ChangeEvent<bool> e) { // value变化回调函数
Debug.Log("previousValue=" + e.previousValue + ", newValue=" + e.newValue);
}
}

​ 运行后,点击折叠三角形,打印日志如下。

​ 声明:本文转自【Unity3D】UI Toolkit元素

【Unity3D】UI Toolkit元素的更多相关文章

  1. unity3d的GUI元素的界面坐标系统总结(有公式)

    GUIText 和GUITexture 1.GUIText 锚点(Anchor)的概念我就不介绍了.像NGUI和tookit2d还有 Cocos2d中都有这个重要的概念,对于图片我们可以认为是图片自身 ...

  2. UI自动化测试元素定位思想

    2014年的最后一天,以一篇短文纪念一下. 经常看到有同学说UI自动化测试定位难,找不到北.这话是不错的,定位是难,灵活且复杂,需要经验加技术,但是有写东西是可以提炼出来作为思想去推而广之的. 简单来 ...

  3. (转)[Unity3D]UI方案及制作细节(NGUI/EZGUI/原生UI系统) 内附unused-assets清除实例

    转载请留下本文原始链接,谢谢.本文会不定期更新维护,最近更新于2013.09.17.   http://blog.sina.com.cn/s/blog_5b6cb9500101bplv.html   ...

  4. FairyGUI编辑器制作Unity3D UI值得借鉴

    笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D实战核心技术详解 ...

  5. 几个Unity3d UI制作的解决方案.

    1.ex2D的渲染机制 (高效的原因) 在以往的2D插件中,渲染方式是每个sprite单独渲染,由Unity负责Dynamic Batching.在新版ex2D中,我们经过严谨的优化实现了独立的dyn ...

  6. [Unity3D]UI方案及制作细节(NGUI/EZGUI/原生UI系统)

    转载请留下本文原始链接,谢谢.本文会不定期更新维护,最近更新于2013.09.17.   http://blog.sina.com.cn/s/blog_5b6cb9500101bplv.html   ...

  7. UI测试之元素定位

    定位方式优先级选择:  ID>Name>CSS>XPath 1.使用id定位 2.使用name定位 3.使用class定位 4.使用css选择器定位 示例xml: <?xml ...

  8. UI定位元素大全(跟App定位元素差不多哦)

    selenium+python自动化之元素定位 作者:一飞冲天 同样的道理,把一个页面上的元素当成是一个对象(你的女神),我们就可以通过她的属性值来找到她,比如她性别女爱好爬山---------你就可 ...

  9. Unity3d:UI面板管理整合进ToLua

    本文基于 https://github.com/chiuan/TTUIFramework https://github.com/jarjin/LuaFramework_UGUI 进行的二次开发,Tha ...

  10. GJM : Unity3D - UI - UI边缘流光特效小技巧 [转载]

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

随机推荐

  1. 05-Shell索引数组变量

    1.介绍 Shell 支持数组(Array),数组是若干数据的集合,其中的每一份数据都称为数组的元素. 注意Bash Shell 只支持一维数组,不支持多维数组. 2.数组的定义 2.1 语法 在 S ...

  2. ORACLE Enterprise Manager Database Express(OEM-express)(遇到localhost拒绝访问情况)配置端口和启动方法

    1.问题 之前一直进不去ORACLE Enterprise Manager Database Express,显示的是localhost拒绝了访问,经过查阅知道是没有配置相应端口. 2.解决方法 转载 ...

  3. .Net 使用 MongoDB

    1.安装nuget包 MongoDB.Driver 2.简单代码 using MongoDB.Bson; using MongoDB.Driver; using System.Buffers; usi ...

  4. Linux-定时任务-cron

  5. [转帖]Linux内存之Cache

    一. Linux内存之Cache 1.1.Cache 1.1.1.什么是Cache? Cache存储器,是位于CPU和主存储器DRAM之间的一块高速缓冲存储器,规模较小,但是速度很快,通常由SRAM( ...

  6. [转帖]Kubernetes 1.23:IPv4/IPv6 双协议栈网络达到 GA

    https://kubernetes.io/zh-cn/blog/2021/12/08/dual-stack-networking-ga/#:~:text=Kubernetes%201.23%EF%B ...

  7. [转帖]Sysbench - 一种系统性能benchmark

    SysBench是一款开源的.跨平台的.模块化的.多线程的性能测试工具,通过高负载地运行在数据库上,可以执行CPU/内存/线程/IO/数据库等方面的性能测试.用于评估操作系统的性能参数. 1 sysb ...

  8. [转帖]yum 下载全量依赖 rpm 包及离线安装(终极解决方案)

    简介 通常生产环境由于安全原因都无法访问互联网.此时就需要进行离线安装,主要有两种方式:源码编译.rpm包安装.源码编译耗费时间长且缺乏编译环境,所以一般都选择使用离线 rpm 包安装. 验证环境 C ...

  9. [转帖]SpecCPU2017 测试cpu性能

    https://www.bbsmax.com/A/GBJrxP1Ed0/ SpecCPU介绍见: https://blog.csdn.net/qq_36287943/article/details/1 ...

  10. Java进程 OOM的多种情况

    Java进程 OOM的多种情况 摘要 OOM 其实有多种: 第一类是JVM原生自发处理的, 这种也分为多种情况. 1. 堆区使用了比较多,并且大部分对象都还有引用, GC不出来可用内存, 这是要给对象 ...