【Unity3D】UI Toolkit容器

1 前言

UI 简介中介绍了 UI 、样式属性、、，UI 元素中介绍了 Label、、、、Radio 、、 Bar、、 等元素，UI 样式选择器中介绍了简单选择器、复杂选择器、伪类选择器等样式选择器，本文将介绍 UI 中的容器，主要包含 、、、 等，官方介绍详见→UXML 。

（空容器）

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

1）属性介绍

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

2）获取根 容器

VisualElement rootVisualElement = GetComponent().rootVisualElement;

3）注册事件回调（）

.cs

using UnityEngine;
using UnityEngine.UIElements;public class RegisterCallbackDemo : MonoBehaviour {private void Awake() {VisualElement rootVisualElement = GetComponent().rootVisualElement;rootVisualElement.RegisterCallback(OnClickDown);rootVisualElement.RegisterCallback(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 。

4）添加事件操作器（）

.cs

using UnityEngine;
using UnityEngine.UIElements;public class ManipulatorDemo : MonoBehaviour {private VisualElement rootVisualElement;private void Awake() {rootVisualElement = GetComponent().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 （滚动容器）

1）属性介绍

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

2）添加元素

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

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

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

4 （列表）

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

1）属性介绍

2） 的使用

.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().rootVisualElement;listView = root.Q();listView.fixedItemHeight = 60;listView.itemsSource = itemsData;listView.makeItem += MakeItem;listView.bindItem += BindItem;listView.onSelectionChange += OnSelectionChange;}private VisualElement MakeItem() { // 创建item元素, 这里以Label元素呈现itemLabel label = new Label();label.style.fontSize = 50;label.style.unityTextAlign = TextAnchor.MiddleLeft;return label;}private void BindItem(VisualElement visualElement, int index) { // 绑定itemLabel label = visualElement as Label;label.text = itemsTitle[index];}private void OnSelectionChange(IEnumerable