1 前言
????????UI Toolkit 是一種基于 Web 技術(shù)的 GUI 框架，是為了解決 UGUI 效率問題而設(shè)計(jì)的新一代 UI 系統(tǒng)（UGUI 的介紹詳見→UGUI概述）。與 UGUI 不同，UI Toolkit 沒有采用 GameObject 的方式，而是參考了 Web 技術(shù)的 XML 和 CSS 方案。這意味著它只保存變化的數(shù)據(jù)，而不是整個(gè)界面狀態(tài)，這使得它具有更高的效率。
????????UI Toolkit 的歷史可以追溯到 Unity 2018 年發(fā)布的 UIElement，起初主要用于 Editor 編輯面板中的 UI 開發(fā)，自 Unity 2019 起，它開始支持運(yùn)行時(shí) UI，并更名為 UIToolkit，它以 Package 包（com.unity.ui）的形式存在，并在 Unity 2021.2 版本中，被官方內(nèi)置在 Unity 中，與 UGUI 的地位相同。
? ? ? ? UI Toolkit 的優(yōu)點(diǎn)：
- 跨平臺(tái)
- 高性能（一個(gè) Draw Call 繪制所有 UI）
- 自定義樣式應(yīng)用到任何元素
- 復(fù)用性、靈活性更好
- 配套的 UI 編輯工具（UI Builder）
- 同使支持 Editor 和 Runtime
?????????UI Toolkit 的缺點(diǎn)：
- 不依賴 GameObject，難以制作放置在 3D 世界中的可互動(dòng) UI
- 不支持 Shader，難以制作特效
- 不支持 Animator 組件，無法制作實(shí)時(shí)循環(huán)動(dòng)畫（但有 Transition 動(dòng)畫系統(tǒng)）
? ? ? ? UI Toolkit 內(nèi)置案例見：【W(wǎng)indow→UI Toolkit→Samples】，UI Tooolkit 容器介紹見→UI Toolkit容器?，UI Tooolkit 元素介紹見→UI Toolkit元素，UI Tooolkit 樣式選擇器介紹見→UI Toolkit樣式選擇器。
2?UI Toolkit 簡(jiǎn)單使用
? ? ? ? 1）創(chuàng)建 UI Document 對(duì)象
? ? ? ? 在 Hierarchy 窗口右鍵，依次選擇【UI Toolkit→UI Document】，創(chuàng)建 UI Document 對(duì)象，如下。
- Panel Settings：定義一些全局的配置，比如字體、樣式等信息，在創(chuàng)建 UI Document 對(duì)象時(shí)，會(huì)自動(dòng)創(chuàng)建 PanelSettings.asset 文件；
- Source Asset：待顯示的頁面資源
- Sort Order：排序順序，當(dāng)有多個(gè) UIDocument 對(duì)象時(shí)，序號(hào)越小的越先顯示（在底部），序號(hào)越大的越后顯示（在頂部）；
? ? ? ? 2）創(chuàng)建 uxml 資源文件
? ? ? ? 在 Assets 窗口右鍵，依次選擇【Create→UI Toolkit→UI Document】，會(huì)生成一個(gè) uxml 文件，重命名為?TestUXMLTemplate，并在 UIDocument 對(duì)象的 Inspector 窗口將 Source Asset 設(shè)置為 TestUXMLTemplate，如下。
????????3）編輯 uxml 文件
? ? ? ? 在 Assets 窗口雙擊 TestUXMLTemplate.uxml 文件，會(huì)打開 UI Builder 窗口，或者在菜單欄依次選擇【W(wǎng)indow→UI Toolkit→UI Builder】，也可以打開 UI Builder 窗口。將 VisualElement 拖拽到 Hierarchy 窗口，如下。
? ? ? ? 選中 Hierarchy 窗口?中的 VisualElement，在 Inspector 窗口配置 Flex 和 Background，如下，按 Ctrl + S 鍵保存。
? ? ? ? 4）查看效果
? ? ? ? ?回到 Game 窗口，顯示效果如下。中間的立方體是事先添加的 Cube 對(duì)象，半透明的黃色是 UI Document 顯示的效果。
3 UI Builder 窗口介紹
????????在 Unity 2021.2 版本之前，需要在 Package Manager 窗口中安裝 UI Builder，自 Unity 2021.2 版本開始 UI Builder 已內(nèi)置在 Unity Editor 中。UI Builder 官方介紹見→UI Builder。
????????在 Assets 窗口雙擊 uxml 文件，會(huì)打開 UI Builder 窗口，或者在菜單欄依次選擇【W(wǎng)indow→UI Toolkit→UI Builder】，也可以打開 UI Builder 窗口。?
- StyleSheets：樣式窗口，用于管理元素樣式；
- Hierarchy：元素層級(jí)窗口，用于管理元素；
- Library：容器和元素庫；
- Inspector：監(jiān)視器窗口，用于配置容器和元素屬性。
????????滾動(dòng)鼠標(biāo)滑輪可以放大和縮小預(yù)覽窗口大??；按鼠標(biāo)中鍵拖拽，可以調(diào)整預(yù)覽窗口的位置。點(diǎn)擊 Viewport 窗口右上角的 Preview 按鈕，可以查看運(yùn)行態(tài)的 UI 界面。
4 樣式屬性介紹
? ? ? ? 每個(gè)元素（或容器）都有以下樣式屬性，本節(jié)將逐一講解這些屬性。
4.1 StyleSheet（樣式表）
????????樣式表模塊中，可以添加和導(dǎo)出樣式，并查看匹配到的樣式選擇器。樣式選擇器官方介紹詳見→USS selectors。
4.2 Inlined Styles（內(nèi)部樣式）
? ? ? ? 內(nèi)部樣式官方介紹詳見→USS common properties，樣式屬性官方介紹詳見→USS properties reference，Box model 如下。
4.2.1?Display（顯示）
- Opacity：不透明度，取值為 0 ~ 100。0 表示透明的，100 表示完全不透明。
- Display：占位顯示，取值有 flex、none。flex 表示盡可能占用剩余空間；none 表示不占用空間，其他元素（或容器）會(huì)擠占該元素（或容器）空間，導(dǎo)致該元素（或容器）不可見。
- Visibility：可見性，取值有 visible、hidden。visible 表示元素（或容器）可見；hidden 表示元素（或容器）不可見，但該元素（或容器）的空間仍然占用著，其他元素不會(huì)擠占該元素（或容器）的空間。
- Overflow：裁剪時(shí)的邊距策略，取值有 visible、hidden。在子元素（或容器）邊框超過當(dāng)前容器的場(chǎng)景下，visible 表示當(dāng)前容器的 Margin & Padding 不會(huì)約束超出部分的容器；hidden 表示當(dāng)前容器的 Margin & Padding 會(huì)約束超出部分的容器。
????????如下，容器的 overflow 屬性設(shè)置為 visible，邊距沒有對(duì)文本生效。
4.2.2 Position（位置）
- Position：取值有 Relative、Absolute，它們的區(qū)別是：Relative 表示在平鋪排列后相對(duì)于自己的偏移；Absolute 表示相對(duì)于父容器的偏移，官方釋義見→Relative and absolute positioning。
- Left：元素（或容器）左側(cè)的位置。
- Top：元素（或容器）頂部的位置。
- Right：元素（或容器）右側(cè)的位置。
- Bottom：元素（或容器）左側(cè)的位置。
? ? ? ? Position 的取值類型有：px、%、auto、initial，含義如下：
- px：取值單位是像素。
- %：取值單位是百分比。
- auto：自動(dòng)的，取值受 Flex、Align、樣式選擇器等影響。
- initial：取值受 Flex、Align 等影響，不受樣式選擇器影響。
4.2.3 Flex（拉伸）
- Basis：元素（或容器）的基礎(chǔ)空間，取值類型有 px、%、auto、initial，含義同 4.2.2 節(jié)。
- Shrink：如果水平方向有空余空間，元素（或容器）占用水平方向剩余空間的比例，取值有比例值、initial（不占用剩余空間）。
- Grow：如果豎直方向有空余空間，元素（或容器）占用豎直方向剩余空間的比例，取值有比例值、initial（不占用剩余空間）。
- Direction：子元素（或容器）排列的方向，取值有：column（從上往下）、column-reserve（從下往上）、row（從左往右）、row-reserve（從右往左）。
- Wrap：子元素（或容器）的排列超過一行（或一列）后的排列策略，取值有 nowrap（不換行，截?cái)囡@示）、wrap、wrap-reverse，
4.2.4 Align（對(duì)齊）
- Align Items：auto、flex-start、flex-end、center、stretch
- Justify Content：flex-start、flex-end、center、space-between、space-around
? ? ? ? 說明：Align 的屬性受 Flex 的 Direction 影響。
4.2.5 Size（尺寸）
- Width：元素（或容器）的寬度，取值類型有 px、%、auto、initial，含義同 4.2.2 節(jié)。
- Height：元素（或容器）的高度，取值類型有 px、%、auto、initial，含義同 4.2.2 節(jié)。
- Max：元素（或容器）的最大寬度和高度，取值類型有 px、%、none（不限）、initial，含義同 4.2.2 節(jié)。
- Min：元素（或容器）的最小寬度和高度，取值類型有 px、%、auto、initial，含義同 4.2.2 節(jié)。
4.2.6 Margin & Padding（外邊距和內(nèi)邊距）
- Margin：外邊距，取值類型有 px、%、auto、initial，含義同 4.2.2 節(jié)。
- Padding：內(nèi)邊距，取值類型有 px、%、auto、initial，含義同 4.2.2 節(jié)。
4.2.7 Text （文本）
- Font：字體類型。
- Font Asset：字體資源。
- Font Style：字體樣式，取值有 bold（粗體）、italic（斜體）。
- Size：字體大小。
- Color：字體顏色。
- Align：字體對(duì)齊方式，取值有 left（居左）、center（水平居中）、right（居右）、upper（居上）、middle（豎直居中）、lower（居下）。
- Wrap：字體包裹方式，即文字超過一行后的顯示方式，取值有 normal（自動(dòng)換行）、nowrap（截?cái)囡@示）。
- Outline Width：描邊寬度。
- Outline Color：描邊顏色。
- Text Shadow：文本陰影。
- Letter Spacing：字符間隔，取值類型有 px、initial，含義同 4.2.2 節(jié)。
- World Spacing：?jiǎn)卧~間隔，取值類型有 px、initial，含義同 4.2.2 節(jié)。
- Paragraph Spacing：段落間隔，取值類型有 px、initial，含義同 4.2.2 節(jié)。
4.2.8 Background（背景）
- Color：背景顏色。
- Image：背景圖片。
- Image Tint：背景圖片顏色。
- Scale Mode：圖片縮放模式，取值有 stretch-to-fill（寬度和高度都鋪滿，會(huì)破壞圖片的原始寬高比）、scale-and-crop（寬度和高度都鋪滿，保持圖片的原始寬高比，可能會(huì)裁剪圖片）、scale-to-fit（寬度或高度鋪滿，保持圖片的原始寬高比）。
- Slice：切片比例，將圖片劃分為 9 宮格，4 個(gè)角的圖片保持原始尺寸不變，可以用于對(duì)話框背景。
4.2.9 Border（邊框）
- Color：邊框顏色。
- Width：邊框?qū)挾?，取值類型?px、initial，含義同 4.2.2 節(jié)。
- Radius：邊框圓角，取值類型有 px、%、initial，含義同 4.2.2 節(jié)。
4.2.10 Transform（變換）
? ? ? ? Transform 官方介紹見→USS transform。
- Pivot Origin：變換作用的中心，取值類型有 px、%，含義同 4.2.2 節(jié)。
- Translate：平移偏移量，取值類型有 px、%，含義同 4.2.2 節(jié)。
- Scale：縮放偏移量，取值類型有比例數(shù)值、none、initial，含義同 4.2.2 節(jié)。
- Rotate：旋轉(zhuǎn)角度，取值單位有 deg（角度）、grad（梯度，100 grad = 90 deg）、rad（弧度）、turn（圈，1 turn = 360 deg）。
4.2.11 Cursor（光標(biāo)）
- Cursor Image：鼠標(biāo)圖片。
4.2.12 Transition Animations（過渡動(dòng)畫）
????????Transition Animations 官方介紹見→USS transition。
- Property：動(dòng)畫作用的屬性。
- Duration：過渡動(dòng)畫執(zhí)行的時(shí)間，取值類型有 s（秒）、ms（毫秒）、initial。
- Easing：屬性隨時(shí)間的變化函數(shù)，類似于插值器。
- Delay：動(dòng)畫延時(shí)執(zhí)行時(shí)間，取值類型有 s（秒）、ms（毫秒）、initial。
5 UQuery
? ? ? ? UQuery 主要用于查找子元素（或子容器），可以通過 type 和 name 查找。元素（或容器）的 Query 方法用于查找所有符合條件的子元素（或子容器），元素（或容器）的 Q 方法用于查找第一個(gè)符合條件的子元素（或子容器）。UQuery 官方介紹見→Find visual elements with UQuery。
5.1 UQuery 多元素查找（Query 方法）
????????1）通過 type 查找
rootVisualElement.Query<Label>().ForEach(OnSelectedMultipleElements);
private void OnSelectedMultipleElements(Label obj) {
obj.text = "xxx";
}????????rootVisualElement 是根 VisualElement 容器，獲取方式如下，下同。
VisualElement rootVisualElement = GetComponent<UIDocument>().rootVisualElement;????????2）通過 name 查找
rootVisualElement.Query("VisualElementName").ForEach(OnSelectedMultipleElements);
private void OnSelectedMultipleElements(VisualElement obj) {
obj.style.backgroundColor = Color.black;
}? ? ? ? ?3）通過 type 和 name?查找
rootVisualElement.Query<Label>("LabelName").ForEach(OnSelectedMultipleElements);
rootVisualElement.Query<Label>("LabelName").AtIndex(1).text = "yyy";
private void OnSelectedMultipleElements(Label obj) {
obj.text = "xxx";
}5.2 UQuery 單元素查找（Q 方法）
????????1）通過 type 查找
Label label = rootVisualElement.Q<Label>();
label.text = "xxx";????????2）通過 name 查找
VisualElement visualElement = rootVisualElement.Q("VisualElementName");
visualElement.style.backgroundColor = Color.black;????????3）通過 type 和 name?查找
Label label = rootVisualElement.Q<Label>("LabelName");
label.text = "xxx";6 UI Toolkit Debugger（調(diào)試器）
? ? ? ? 1）打開 UI Toolkit Debugger
? ? ? ? 在 UI Builder 窗口的右上角點(diǎn)擊更多，展開后點(diǎn)擊 UI Toolkit Debugger 即可打開調(diào)試窗口，也可以通過【W(wǎng)indow→UI Toolkit→Debugger】打開調(diào)試窗口。
? ? ? ? 2）查看 Box model
????????點(diǎn)擊 Show Layout 按鈕，可以看到畫布的元素布局邊界，如下。
?????????選中元素（或容器），在 Debugger 窗口可以看到 Box model 等信息，如下。點(diǎn)擊 Pick Element 按鈕，可以在 Viewport 窗口拾取元素信息。文章來源：http://www.zghlxwxcb.cn/news/detail-685668.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-685668.html
到了這里，關(guān)于【Unity3D】UI Toolkit簡(jiǎn)介的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
