当前位置：首页 > news >正文

UIToolkit（一）

news 来源：原创 2025/5/19 14:21:57

1 前言
UI Toolkit 是一种基于 Web 技术的 GUI 框架，是为了解决 UGUI 效率问题而设计的新一代 UI 系统（UGUI 的介绍详见→UGUI概述）。与 UGUI 不同，UI Toolkit 没有采用 GameObject 的方式，而是参考了 Web 技术的 XML 和 CSS 方案。这意味着它只保存变化的数据，而不是整个界面状态，这使得它具有更高的效率。
UI Toolkit 的历史可以追溯到 Unity 2018 年发布的 UIElement，起初主要用于 Editor 编辑面板中的 UI 开发，自 Unity 2019 起，它开始支持运行时 UI，并更名为 UIToolkit，它以 Package 包（com.unity.ui）的形式存在，并在 Unity 2021.2 版本中，被官方内置在 Unity 中，与 UGUI 的地位相同。
UI Toolkit 的优点：
跨平台
高性能（一个 Draw Call 绘制所有 UI）
自定义样式应用到任何元素
复用性、灵活性更好
配套的 UI 编辑工具（UI Builder）
同使支持 Editor 和 Runtime
UI Toolkit 的缺点：
不依赖 GameObject，难以制作放置在 3D 世界中的可互动 UI
不支持 Shader，难以制作特效
不支持 Animator 组件，无法制作实时循环动画（但有 Transition 动画系统）
UI Toolkit 内置案例见：【Window→UI Toolkit→Samples】，UI Tooolkit 容器介绍见→UI Toolkit容器，UI Tooolkit 元素介绍见→UI Toolkit元素，UI Tooolkit 样式选择器介绍见→UI Toolkit样式选择器。
2 UI Toolkit简单使用
创建uxml 文件
一 Windows -> UI Toolkit -> UIBuilder
在这里插入图片描述
二在 Assets 窗口右键，依次选择【Create→UI Toolkit→UI Document】，会生成一个 uxml 文件

StyleSheets：样式窗口，用于管理元素样式；
Hierarchy：元素层级窗口，用于管理元素；
Library：容器和元素库；
Inspector：监视器窗口，用于配置容器和元素属性
滚动鼠标滑轮可以放大和缩小预览窗口大小；按鼠标中键拖拽，可以调整预览窗口的位置。点击 Viewport 窗口右上角的 Preview 按钮，可以查看运行态的 UI 界面。
创建UI document 对象
在 Hierarchy 窗口右键，依次选择【UI Toolkit→UI Document】，创建 UI Document 对象，如下。

Panel Settings：定义一些全局的配置，比如字体、样式等信息，在创建 UI Document 对象时，会自动创建 PanelSettings.asset 文件；
Source Asset：待显示的页面资源
Sort Order：排序顺序，当有多个 UIDocument 对象时，序号越小的越先显示（在底部），序号越大的越后显示（在顶部）；
编辑uxml
在 Assets 窗口双击 TestUXMLTemplate.uxml 文件，会打开 UI Builder 窗口，或者在菜单栏依次选择【Window→UI Toolkit→UI Builder】，也可以打开 UI Builder 窗口。

选中 Hierarchy 窗口中的 VisualElement，在 Inspector 窗口配置 Flex 和 Background，如下，按 Ctrl + S 键保存。