布局引擎( 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
来相对于其父位置矩形来放置当前元素时,它不会影响其兄弟姐妹或父母的布局。