布局引擎

UI Toolkit includes a layout engine that positions visual elements based on layout and styling properties. The layout engine uses the layout principles of Yoga, which implements a subset of Flexbox, a HTML/CSS layout system.

Resources

To get started with Yoga and Flexbox, use the following external resources:

• Yoga official documentation: UI Toolkit properties match Yoga layout behavior.
• CSS-Tricks guide to Flexbox: UI Toolkit supports most properties in Flexbox.

行为

默认情况下，所有视觉元素都是布局的一部分。布局具有以下默认行为：

• 容器垂直分配其子项。
• The position of a container rectangle includes its children rectangles. This behavior can be limited by other layout properties.
• A visual element with text uses the text size in its size calculations. This behavior can be limited by other layout properties.

UI Toolkit includes built-in controls for standard UI components, such as a button, toggle, or text field. These built-in controls have styles that affect their layout.

Best practices

The following list provides tips to help improve the performance of the layout engine:

• 设置 width 和 height 来定义元素的大小。

• Use the flexGrow property (USS: flex-grow: <value>;) to assign a flexible size to an element. The value of the flexGrow property assigns a base weight to the size of an element when it’s determined by its siblings.

• Set the flexDirection property to row (USS: flex-direction: row;) to switch to a horizontal layout.

• 使用相对定位根据元素的原始布局位置来偏移元素。

• Set the position property to absolute to place an element relative to its parent position rectangle. This doesn’t affect the layout of its siblings or parent.

示例

The following example creates a UI element that is anchored to the lower left corner of the screen. This is achieved by creating a parent element that fills the entire screen, and then positioning a child element in its lower left corner.

1. Create a new VisualElement
2. Set the flexGrow property to 1.
3. Create a new VisualElement and make it a child of the first one
4. Set the position property on the element to absolute
5. Set the position offset for left and bottom to 0

This is the resulting XML code:

<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>