【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。

2 Label(标签)

        Label 官方介绍见→UXML element Label。

        1)属性介绍

【Unity3D】UI Toolkit元素_第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)属性介绍

【Unity3D】UI Toolkit元素_第2张图片

  • 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

4 TextField(输入文本)

        TextField 官方介绍见→UXML element TextField。

        1)属性介绍

【Unity3D】UI Toolkit元素_第3张图片

  • 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)属性介绍

【Unity3D】UI Toolkit元素_第4张图片

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

【Unity3D】UI Toolkit元素_第5张图片

        打印日志如下。

6 RadioButton(单选框)

        RadioButton 官方介绍见→UXML element RadioButton。

        1)属性介绍

【Unity3D】UI Toolkit元素_第6张图片

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

【Unity3D】UI Toolkit元素_第7张图片

        打印日志如下。

7 RadioButtonGroup(单选按钮组)

        RadioButtonGroup 官方介绍见→UXML element RadioButtonGroup。

【Unity3D】UI Toolkit元素_第8张图片

        1)属性介绍

【Unity3D】UI Toolkit元素_第9张图片

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

        2)配置单选按钮组

        配置 RadioButtonGroup 如下。

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

【Unity3D】UI Toolkit元素_第10张图片

        显示如下。

【Unity3D】UI Toolkit元素_第11张图片

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

【Unity3D】UI Toolkit元素_第12张图片

        打印日志如下。

8 Slider 和 SliderInt(滑动条)

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

        1)属性介绍

【Unity3D】UI Toolkit元素_第13张图片

  • 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);
    }
}

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

【Unity3D】UI Toolkit元素_第14张图片

9 ProgressBar(进度条)

        ProgressBar 官方介绍见→UXML element ProgressBar。

         1)属性介绍

【Unity3D】UI Toolkit元素_第15张图片

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

        运行效果如下。  

【Unity3D】UI Toolkit元素_第16张图片

10 Dropdown(下拉列表)

        Dropdown 官方介绍见→UXML element DropdownField。

【Unity3D】UI Toolkit元素_第17张图片

         1)属性介绍

【Unity3D】UI Toolkit元素_第18张图片

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

        2)配置下拉列表

        配置 Dropdown 如下。

         显示如下。

【Unity3D】UI Toolkit元素_第19张图片

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

【Unity3D】UI Toolkit元素_第20张图片

        打印日志如下。

11 Foldout(折叠列表)

        Foldout 官方介绍见→UXML element Foldout。

【Unity3D】UI Toolkit元素_第21张图片

        1)属性介绍

【Unity3D】UI Toolkit元素_第22张图片

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

        2)添加元素

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

【Unity3D】UI Toolkit元素_第23张图片

        显示如下。

        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);
    }
}

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

你可能感兴趣的:(Unity3D,#,Unity基础,Button,TextField,Progress,Dropdown,Foldout,Toggle,Slider)