Button TextField Progress Dropdown Foldout Toggle Slider 【Unity3D】UI Toolkit元素

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 reference、Structure 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 中输入以下富文本，显示如下。

Hello World

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().rootVisualElement;

Button button = root.Q();

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().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);

}

}

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().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，显示如下。  

        打印日志如下。

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().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，显示如下。 

        打印日志如下。

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().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，显示如下。 

        打印日志如下。

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().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);

}

}

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

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().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 中打印进度条的进度。

        运行效果如下。  

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 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，显示如下。  

        打印日志如下。

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().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);

}

}

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

文章来源

评论可见，请评论后查看内容，谢谢！！！

 您阅读本篇文章共花了：