Unity3D

【Unity3D】UI Toolkit容器

2023-10-15  本文已影响0人  LittleFatSheep

1 前言

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

2 VisualElement（空容器）

VisualElement 是一个空容器，便于组织和管理元素，官方介绍见→UXML element VisualElement。

1）属性介绍

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

2）获取根 VisualElement 容器

VisualElement rootVisualElement = GetComponent<UIDocument>().rootVisualElement;

3）注册事件回调（RegisterCallback）

RegisterCallbackDemo.cs

using UnityEngine;
using UnityEngine.UIElements;

public class RegisterCallbackDemo : MonoBehaviour {
    private void Awake() {
        VisualElement rootVisualElement = GetComponent<UIDocument>().rootVisualElement;
        rootVisualElement.RegisterCallback<MouseDownEvent>(OnClickDown);
        rootVisualElement.RegisterCallback<ClickEvent>(OnClick);
    }

    private void OnClickDown(MouseDownEvent e) { // 鼠标按下时事件回调
        Debug.Log("mousePosition=" + e.mousePosition + ", pressedButtons=" + e.pressedButtons); // 1:左键, 2:右键, 4:中键
    }

    private void OnClick(ClickEvent e) { // 鼠标左键点击时事件回调
        Debug.Log("target=" + e.target);
    }
}

说明：注册的事件主要有以下几种，官方介绍见→Event reference。

4）添加事件操作器（AddManipulator）

ManipulatorDemo.cs

using UnityEngine;
using UnityEngine.UIElements;

public class ManipulatorDemo : MonoBehaviour {
    private VisualElement rootVisualElement;

    private void Awake() {
        rootVisualElement = GetComponent<UIDocument>().rootVisualElement;
        Clickable leftClickManipulator = new Clickable(OnCtrlDoubleClicked);
        leftClickManipulator.activators.Clear();
        leftClickManipulator.activators.Add(new ManipulatorActivationFilter() {
            button = MouseButton.LeftMouse, // 鼠标左键
            clickCount = 2, // 点击次数
            modifiers = EventModifiers.Control // 按键
        });
        rootVisualElement.AddManipulator(leftClickManipulator);
    }

    private void OnCtrlDoubleClicked(EventBase e) { // Ctrl+Double Click事件回调
        Debug.Log("OnCtrlDoubleClicked");
    }
}

3 ScrollView（滚动容器）

1）属性介绍

ScrollView 是一个滚动容器，官方介绍见→UXML element ScrollView。

2）添加元素

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

也可以通过以下代码添加元素。

VisualElement rootVisualElement = GetComponent<UIDocument>().rootVisualElement;
ScrollView scrollview = rootVisualElement.Q<ScrollView>();
scrollview.Add(new Label("LabelContent"));

4 ListView（列表）

ListView 是一个列表容器，官方介绍见→UXML element ListView。

1）属性介绍

2）ListView 的使用

ListViewDemo.cs

using UnityEngine;
using UnityEngine.UIElements;
using System.Collections.Generic;

public class ListViewDemo : MonoBehaviour {
    private VisualElement root; // 根容器
    private ListView listView; // 列表
    private string[] itemsTitle = new string[] {"First", "Second", "Third", "Fourth"}; // item的标题
    private int[] itemsData = new int[]{0, 1, 2, 3}; // item的数值

    private void Awake() {
        root = GetComponent<UIDocument>().rootVisualElement;
        listView = root.Q<ListView>();
        listView.fixedItemHeight = 60;
        listView.itemsSource = itemsData;
        listView.makeItem += MakeItem;
        listView.bindItem += BindItem;
        listView.onSelectionChange += OnSelectionChange;
    }

    private VisualElement MakeItem() { // 创建item元素, 这里以Label元素呈现item
        Label label = new Label();
        label.style.fontSize = 50;
        label.style.unityTextAlign = TextAnchor.MiddleLeft;
        return label;
    }

    private void BindItem(VisualElement visualElement, int index) { // 绑定item
        Label label = visualElement as Label;
        label.text = itemsTitle[index];
    }

    private void OnSelectionChange(IEnumerable<object> objs) { // 选中事件回调
        foreach (object item in objs) {
            int data = (int) item;
            Debug.Log(data);
        }
    }
}

运行后，点击 Second，显示如下。

打印日志如下。

5 GroupBox（分组盒子）

GroupBox 是一个逻辑分组容器，官方介绍见→UXML element GroupBox。

1）属性介绍

2）GroupBox 的使用

GroupBoxDemo.cs

using UnityEngine;
using UnityEngine.UIElements;

public class GroupBoxDemo : 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 = "GroupBoxDemo";
        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，显示如下。

打印日志如下。

声明：本文转自【Unity3D】UI Toolkit容器。

上一篇下一篇

猜你喜欢

热点阅读