1 前言
????????UI Toolkit簡介?中介紹了 UI Builder、樣式屬性、UQuery、Debugger，UI Toolkit元素?中介紹了 Label、Button、TextField、Toggle、Radio Button、Slider、Progress Bar、Dropdown、Foldout 等元素，UI Toolkit樣式選擇器?中介紹了簡單選擇器、復(fù)雜選擇器、偽類選擇器等樣式選擇器，本文將介紹 UI Toolkit 中的容器，主要包含 VisualElement、ScrollView、ListView、GroupBox 等，官方介紹詳見→UXML elements reference。
2?VisualElement（空容器）
????????VisualElement 是一個(gè)空容器，便于組織和管理元素，官方介紹見→UXML element VisualElement。
? ? ? ? 1）屬性介紹?
- View Data Key：用于視圖數(shù)據(jù)持久化（如：樹展開狀態(tài)、滾動(dòng)位置、縮放級別)，作為視圖數(shù)據(jù)保存 / 加載的鍵，如果不設(shè)置此鍵將禁用該容器的持久性。
- Picking Mode：判斷是否可以在 mouseEvents 期間選擇此容器。
- Tooltip：鼠標(biāo)懸停到該容器上時(shí)彈出的提示文字。
- Usage Hints：預(yù)期使用模式，便于系統(tǒng)加速某些操作。
- Tab Index：用于對焦點(diǎn)環(huán)中的焦點(diǎn)對象進(jìn)行排序。
- Focusable：容器是否能獲得焦點(diǎn)。
? ? ? ? 說明：View Data Key、Picking Mode、Tooltip、Usage Hints、Tab Index、Focusable 都是基類屬性，后文若出現(xiàn)這些屬性將不再贅述。?
? ? ? ? ?2）獲取根?VisualElement 容器
VisualElement rootVisualElement = GetComponent<UIDocument>().rootVisualElement;????????3）注冊事件回調(diào)（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) { // 鼠標(biāo)按下時(shí)事件回調(diào)
Debug.Log("mousePosition=" + e.mousePosition + ", pressedButtons=" + e.pressedButtons); // 1:左鍵, 2:右鍵, 4:中鍵
}
private void OnClick(ClickEvent e) { // 鼠標(biāo)左鍵點(diǎn)擊時(shí)事件回調(diào)
Debug.Log("target=" + e.target);
}
}????????說明：注冊的事件主要有以下幾種，官方介紹見→Event reference。
- MouseDownEvent：鼠標(biāo)按下時(shí)觸發(fā)的事件。
- MouseUpEvent：鼠標(biāo)抬起時(shí)觸發(fā)的事件。
- ClickEvent：鼠標(biāo)左鍵點(diǎn)擊時(shí)觸發(fā)的事件。
- MouseOverEvent：鼠標(biāo)進(jìn)入元素時(shí)觸發(fā)的事件。
- MouseOutEvent：鼠標(biāo)離開元素時(shí)觸發(fā)的事件。
- MouseMoveEvent：鼠標(biāo)移動(dòng)時(shí)觸發(fā)的事件。
- MouseEnterEvent：鼠標(biāo)進(jìn)入元素或其子元素時(shí)觸發(fā)的事件。
- MouseLeaveEvent：鼠標(biāo)離開元素和其所有子元素時(shí)觸發(fā)的事件。
- MouseCaptureEvent：處理器開始捕獲鼠標(biāo)后觸發(fā)的事件。
- MouseCaptureOutEvent：處理器停止捕獲鼠標(biāo)后觸發(fā)的事件。
- MouseEnterWindowEvent：鼠標(biāo)進(jìn)入窗口時(shí)觸發(fā)的事件。
- MouseLeaveWindowEvent：鼠標(biāo)離開窗口時(shí)觸發(fā)的事件。
- WheelEvent：鼠標(biāo)滑輪滾動(dòng)時(shí)觸發(fā)的事件。
????????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, // 鼠標(biāo)左鍵
clickCount = 2, // 點(diǎn)擊次數(shù)
modifiers = EventModifiers.Control // 按鍵
});
rootVisualElement.AddManipulator(leftClickManipulator);
}
private void OnCtrlDoubleClicked(EventBase e) { // Ctrl+Double Click事件回調(diào)
Debug.Log("OnCtrlDoubleClicked");
}
}3 ScrollView（滾動(dòng)容器）
????????1）屬性介紹?
????????ScrollView 是一個(gè)滾動(dòng)容器，官方介紹見→UXML element ScrollView。
- Mode：控制用戶滾動(dòng)內(nèi)容的方式，取值有 Vertical（垂直滾動(dòng)）、Horizontal（水平滾動(dòng)）、Vertical And?Horizontal（垂直和水平滾動(dòng)）。
- Nested Interaction Kind：滑動(dòng)到邊界后的行為，取值有 default（反彈）、Stop Scrolling（停止滑動(dòng)）、Forward Scrolling（繼續(xù)向前滑動(dòng)）。
- Horizontal Scroller Visibility：水平滾動(dòng)條的可見性，取值有 Auto（僅在內(nèi)容顯示不下時(shí)才顯示滑動(dòng)條）、Always Visible（一直可見）、Hidden（一直隱藏）。
- Vertical Scroller Visibility：垂直滾動(dòng)條的可見性，取值有 Auto（僅在內(nèi)容顯示不下時(shí)才顯示滑動(dòng)條）、Always Visible（一直可見）、Hidden（一直隱藏）。
- Horizontal Page Size：控制水平滑動(dòng)的速度。
- Vertical Page Size：控制垂直滑動(dòng)的速度。
- Touch Scroll Type：觸摸滑動(dòng)類型，Unrestricted（不受約束的）、Elastic（彈性的）、Clamped（夾緊的）。
- Scroll Deceleration Rate：滑動(dòng)停止時(shí)的減速度（速度的導(dǎo)數(shù)，為 0 時(shí)立刻停止滑動(dòng)）。
- Elasticity：滑動(dòng)到邊界時(shí)的彈性值。
? ? ? ? 2）添加元素
? ? ? ? 將元素拖拽到 ScrollView 上，會(huì)自動(dòng)放在其 unity-content-container 元素下面，如下。?
? ? ? ? 也可以通過以下代碼添加元素。
VisualElement rootVisualElement = GetComponent<UIDocument>().rootVisualElement;
ScrollView scrollview = rootVisualElement.Q<ScrollView>();
scrollview.Add(new Label("LabelContent"));4 ListView（列表）
????????ListView 是一個(gè)列表容器，官方介紹見→UXML element ListView。
? ? ? ? 1）屬性介紹
- BindingPath：目標(biāo)屬性綁定的路徑。
- Fixed Item Height：列表中 item 的高度，以像素為單位。
- Virtualization Method：設(shè)置 item 高度是固定的還是動(dòng)態(tài)的，取值有 Fixed Height（固定高度）、Dynamic Height（動(dòng)態(tài)高度）。
- Show Border：是否顯示邊框。
- Selection Type：選擇類型，取值有 None（禁止選中）、Single（只能選中單個(gè) item）、Multiple（可以選中多個(gè) item）。
- Show Alternation Row Backgrounds：顯示交替行背景，取值有 None（不顯示交替行背景）、Content Only（有內(nèi)容時(shí)才顯示交替行背景）、All（一直顯示交替行背景）。
- Show Foldout Header：是否顯示折疊頁眉。
- Header Title：頁眉標(biāo)題。
- Show Add Remove Footer：是否顯示添加 / 刪除頁腳，如果顯示，在頁腳會(huì)出現(xiàn) "+" 和 "-" 按鈕。
- Reorderable：是否允許 item 重排序。
- Reorder Mode：重排序模式，取值有 Simple（在重排序時(shí)顯示標(biāo)準(zhǔn)的藍(lán)線拖動(dòng)器）、Animated（在每個(gè) item 之前添加拖拽句柄，可以用來拖拽單個(gè) item）。
- Show Bound Collection Size：是否顯示 item 數(shù)。
- Horizontal Scrolling：是否可以水平滑動(dòng)。
? ? ? ? 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的標(biāo)題
private int[] itemsData = new int[]{0, 1, 2, 3}; // item的數(shù)值
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() { // 創(chuàng)建item元素, 這里以Label元素呈現(xiàn)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) { // 選中事件回調(diào)
foreach (object item in objs) {
int data = (int) item;
Debug.Log(data);
}
}
}? ? ? ? 運(yùn)行后，點(diǎn)擊 Second，顯示如下。?
? ? ? ? 打印日志如下。
5 GroupBox（分組盒子）
????????GroupBox 是一個(gè)邏輯分組容器，官方介紹見→UXML element GroupBox。
? ? ? ? 1）屬性介紹
- Text：?分組標(biāo)題。
????????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的標(biāo)簽
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) { // 添加單選項(xiàng)
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) { // 選項(xiàng)變化回調(diào)函數(shù)
Debug.Log("index=" + index + ", previousValue=" + e.previousValue + ", newValue=" + e.newValue);
}
}????????運(yùn)行后，點(diǎn)擊 Second，顯示如下。??
????????打印日志如下。文章來源：http://www.zghlxwxcb.cn/news/detail-708836.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-708836.html
到了這里，關(guān)于【Unity3D】UI Toolkit容器的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
