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 reference。
Label 官方介绍见→UXML element Label。
1)属性介绍
说明:View Data Key、Picking Mode、Tooltip、Usage Hints、Tab Index、Focusable、BindingPath 都是基类属性,后文若出现这些属性将不再赘述。
2)富文本应用
当支持富文本时,在 text 中输入以下富文本,显示如下。
Hello World
Button 官方介绍见→UXML element Button。
1)属性介绍
2)事件响应
ButtonDemo.cs
using UnityEngine;
using UnityEngine.UIElements;
public class ButtonDemo : MonoBehaviour {
private void Awake() {
VisualElement root = GetComponent().rootVisualElement;
Button button = root.Q
TextField 官方介绍见→UXML element TextField。
1)属性介绍
2)事件响应
TextFieldDemo.cs
using UnityEngine;
using UnityEngine.UIElements;
public class TextFieldDemo : MonoBehaviour {
private void Awake() {
VisualElement root = GetComponent().rootVisualElement;
TextField textField = root.Q();
textField.isDelayed = true; // 延时更新value, 在用户按Enter或输入文本失焦后才更新value属性
textField.RegisterValueChangedCallback(OnValueChanged);
}
private void OnValueChanged(ChangeEvent e) { // 输入回调事件
Debug.Log("previousValue=" + e.previousValue + ", newValue=" + e.newValue);
}
}
Toggle 官方介绍见→UXML element Toggle。
1)属性介绍
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().rootVisualElement;
groupBox = root.Q();
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().AtIndex(2);
ve.style.marginRight = 10;
toggle.RegisterValueChangedCallback(e => OnValueChanged(index, e));
groupBox.Add(toggle);
}
private void OnValueChanged(int index, ChangeEvent e) { // value变化回调函数
Debug.Log("index=" + index + ", previousValue=" + e.previousValue + ", newValue=" + e.newValue);
}
}
运行后,点击 Second、Third,显示如下。
打印日志如下。
RadioButton 官方介绍见→UXML element RadioButton。
1)属性介绍
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().rootVisualElement;
groupBox = root.Q();
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().AtIndex(2);
ve.style.marginRight = 10;
choice.RegisterValueChangedCallback(e => OnValueChanged(index, e));
groupBox.Add(choice);
}
private void OnValueChanged(int index, ChangeEvent e) { // 选项变化回调函数
Debug.Log("index=" + index + ", previousValue=" + e.previousValue + ", newValue=" + e.newValue);
}
}
运行后,点击 Second,显示如下。
打印日志如下。
RadioButtonGroup 官方介绍见→UXML element RadioButtonGroup。
1)属性介绍
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().rootVisualElement;
RadioButtonGroup group = root.Q();
group.label = "";
group.choices = choices;
group.style.fontSize = 50;
group.RegisterValueChangedCallback(OnValueChanged);
}
private void OnValueChanged(ChangeEvent e) { // value变化回调函数
Debug.Log("previousValue=" + e.previousValue + ", newValue=" + e.newValue);
}
}
运行后,点击 Second,显示如下。
打印日志如下。
Slider 官方介绍见→UXML element Slider,SliderInt 官方介绍见→UXML element SliderInt。
1)属性介绍
2)事件响应
SliderDemo.cs
using UnityEngine;
using UnityEngine.UIElements;
public class SliderDemo : MonoBehaviour {
private VisualElement root; // 根容器
private void Awake() {
root = GetComponent().rootVisualElement;
Slider slider = root.Q();
slider.style.width = 500;
slider.RegisterValueChangedCallback(OnValueChanged);
}
private void OnValueChanged(ChangeEvent e) { // value变化回调函数
Debug.Log("previousValue=" + e.previousValue + ", newValue=" + e.newValue);
}
}
运行后,滑动滑块,打印日志如下。
ProgressBar 官方介绍见→UXML element ProgressBar。
1)属性介绍
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().rootVisualElement;
progressBar = root.Q();
progressBar.style.width = 500;
progressBar.value = progressBar.lowValue;
progressBar.Query().AtIndex(2).style.backgroundColor = Color.grey; // 进度条背景色
progressBar.Query().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 e) { // value变化回调函数
Debug.Log("previousValue=" + e.previousValue + ", newValue=" + e.newValue);
}
}
说明:这里通过协程更新进度条(协程的介绍详见→协同程序),在 OnValueChanged 中打印进度条的进度。
运行效果如下。
Dropdown 官方介绍见→UXML element DropdownField。
1)属性介绍
2)配置下拉列表
配置 Dropdown 如下。
显示如下。
3)事件响应
DropdownDemo.cs
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UIElements;
public class DropdownDemo : MonoBehaviour {
private VisualElement root; // 根容器
private List choices = new List {"First", "Second", "Third", "Fourth"}; // choices的标签
private void Awake() {
root = GetComponent().rootVisualElement;
DropdownField dropdown = root.Q();
dropdown.style.width = 600;
dropdown.choices = choices;
dropdown.RegisterValueChangedCallback(OnValueChanged);
}
private void OnValueChanged(ChangeEvent e) { // value变化回调函数
Debug.Log("previousValue=" + e.previousValue + ", newValue=" + e.newValue);
}
}
运行后,点击 Second,显示如下。
打印日志如下。
Foldout 官方介绍见→UXML element Foldout。
1)属性介绍
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().rootVisualElement;
foldout = root.Q();
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 e) { // value变化回调函数
Debug.Log("previousValue=" + e.previousValue + ", newValue=" + e.newValue);
}
}
运行后,点击折叠三角形,打印日志如下。