UIElements开发人员指南 3 The Layout Engine（布局引擎）

布局引擎（ Layout Engine）

UIElements包括一个布局引擎，可根据布局（ layout）和样式（styling）属性定位视觉元素。布局引擎是 Yoga open source project，它实现了Flexbox的一个子集：HTML / CSS布局系统。

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

• Yoga官方文档：属性几乎是一一相互匹配
• Flexbox的CSS-Tricks指南：支持大多数属性，但有一些细微差别

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

• 容器将会垂直分布其子容器。
• 容器矩形在定位计算会包含其子矩形，此行为也受到其他布局属性的约束。
• 带文本的可视元素在其大小计算中考虑文本占用大小，此行为也受到其他布局属性的约束。

UIElements包括标准UI的内置控件，例如按钮（button），单选按钮（toggle），文本（text field）或标签(label​​​​​)。这些内置控件都具有影响其布局的样式。

以下提供了关于布局引擎的一些基本用法：

• 设置width和height来定义元素的大小。
• 使用flexGrow属性 (在 USS中: flex-grow: <value>;) 中为元素指定弹性的大小。当元素的大小由其兄弟姐妹确定时，flexGrow属性的值充当权重{当前元素的尺寸占比？}。
• 将flexDirection属性设置为row（在USS中:flex-direction: row;）以切换到水平布局。
• 使用相对定位根据元素的原始布局位置偏移元素。
• 将position属性设置为absolute来相对于其父位置矩形来放置当前元素时，它不会影响其兄弟姐妹或父母的布局。