UI 工具包包括一个布局引擎,可根据布局和样式属性定位视觉元素。布局引擎使用 Yoga 的布局原则,实现了名为 Flexbox 的 HTML/CSS 布局系统的子集。
要开始使用 Yoga 和 Flexbox,请使用以下外部资源:
默认情况下,所有视觉元素都是布局的一部分。布局具有以下默认行为:
UI 工具包提供了标准 UI 控件的内置控件,如按钮、开关、文本字段或标签。这些内置控件具有影响其布局的样式。
下面列出了有关如何改进布局引擎性能的技巧:
设置 width
和 height
来定义元素的大小。
使用 flexGrow
属性 (USS: flex-grow: <value>;
) 为元素分配灵活的大小。当元素的大小由其同级决定时,flexGrow
属性的值为元素的大小指定一个基本权重。
将 flexDirection
属性设置为 row
(USS: flex-direction: row;
) 以切换到水平布局。
使用相对定位根据元素的原始布局位置来偏移元素。
将 position
属性设置为 absolute
以便相对于父位置矩形来放置某个元素。这不会影响其同级和父项的布局。
下面的示例创建一个锚定到屏幕左下角的 UI 元素。这是通过创建一个填充整个屏幕的父元素,然后在其左下角放置一个子元素来实现的。
flexGrow
属性设置为 1。position
属性设置为 absolute
。left
和 bottom
的位置偏移设置为 0。这是所得到的 XML 代码:
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
<ui:VisualElement style="flex-grow: 1;">
<ui:VisualElement style="position: absolute; left: 0; bottom: 0;" />
</ui:VisualElement>
</ui:UXML>