布局引擎

UI Toolkit includes a layout engine that positions visual elements based on layout and styling properties. The layout engine is the Yoga open source project that implements a subset of Flexbox: a HTML/CSS layout system.

要开始使用 Yoga 和 Flexbox，请参阅以下外部资源：

• Yoga 官方文档：属性映射几乎是 1 比 1
• CSS-Tricks 的 Flexbox 指南：支持大多数属性，仅有一些细微差别

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

• 容器垂直分配其子项。
• 容器矩形的位置包括其子矩形。其他布局属性可能限制此行为。
• 带文本的视觉元素在其大小计算中使用文本大小。其他布局属性可能限制此行为。

UI 工具包包括标准 UI 控件的内置控件，如按钮、开关、文本字段或标签。这些内置控件具有影响其布局的样式。

下面列出了有关如何使用布局引擎的技巧：

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

• 使用 flexGrow 属性（USS 格式为：flex-grow: <value>;）为元素分配灵活的大小。当元素的大小由其同级决定时，flexGrow 属性的值用作加权。

• 将 flexDirection 属性设置为 row（USS 格式为：flex-direction: row;）以切换到水平布局。

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

• 将 position 属性设置为 absolute 以便相对于父位置矩形来放置某个元素。在这种情况下不会影响其同级和父项的布局。

• 2018–11–02 页面已修订