SAP UI5 应用里 FlexBox 控件的设计原理
sap.m.FlexBox 控件为 flexible box layout
构建容器。VBox 控件为垂直的框布局(vertical flexible box layout
)构建容器。 VBox 是一种使用的控件,因为它只是一个定制化的 FlexBox 控件。
VBox 包含 items 聚合,从 FlexBox 继承而来。
HBox 控件为水平框布局(horizontal flexible box layout
)构建容器。
HBox 有一个名叫 LayoutData
的聚合,用来定义此控件在布局内使用时的布局约束(layout constraints).
LayoutData 类是 typed classes,必须与嵌入布局相匹配。
删除这段代码之后,应用的布局就被破坏了:
两个按钮所在的区域和 3D Viewer 显示的区域混淆在一起了:
growFactor:确定剩余可分配空间时弹性项目(flex item)的灵活性(flexibility)。
一些影响布局的属性需要在 FlexBox 控件中设置。其他属性可以附加到通过 layoutData
聚合放置在 FlexBox 内的控件。例如,布局方向在 FlexBox 中设置如下:
var oMyFlexbox = new sap.m.FlexBox({
items: [
new sap.m.Button({text: "Button 1"}),
new sap.m.Button({text: "Button 2"})
],
direction: "Column"
});
最后的效果:
我们也可以通过 order 属性显式指定按钮的顺序:
var oMyFlexbox = new sap.m.FlexBox({
items: [
new sap.m.Button({
text: "Button 1",
layoutData: new FlexItemData({order: 2})
}),
new sap.m.Button({text: "Button 2"})
]
});
上面的代码,虽然 Button 1 先出现,但其通过 layoutData 设置的 order 属性值为 2,因此出现在 Button 2 之后:
FlexBox 控件是 CSS 中 flexible box layout
的包装器。控件呈现器(control renderer)在适当的 HTML 元素上设置 CSS 属性(包括必要时的前缀版本)。 实际的布局是由浏览器完成的。
FlexBox 布局具有子元素的布局方向。 默认方向是行,行在阅读方向上水平排列。 这定义了主轴。 这种情况下的横轴是垂直的。
开发人员可以将布局方向属性更改为 Column,这将导致垂直主轴和水平交叉轴。
相关文章
- 7000+字图文并茂解带你深入理解java锁升级的每个细节
- 全文手敲代码,教你用Java实现扫雷小游戏
- 4种方法教你如何查看java对象所占内存大小
- 手绘图解java类加载原理
- Java中的线程到底有哪些安全策略
- Java中观察者模式与委托,还在傻傻分不清
- 一图详解java-class类文件原理
- Java遇上SPL:架构优势和开发效率,一个不放过
- 长篇图解java反射机制及其应用场景
- [java并发编程]基于信号量semaphore实现限流器
- java并发编程-StampedLock高性能读写锁
- 【java并发编程】ReentrantLock 可重入读写锁
- 【java并发编程】Lock & Condition 协调同步生产消费
- Java synchronized对象级别与类级别的同步锁
- java并发编程JUC第十二篇:AtomicInteger原子整型
- java并发编程JUC第十一篇:如何在线程之间进行对等数据交换
- java并发编程JUC第十篇:CyclicBarrier线程同步
- java并发编程JUC第九篇:CountDownLatch线程同步
- java并发编程工具类JUC第八篇:ConcurrentHashMap
- java并发编程工具类JUC第七篇:BlockingDeque双端阻塞队列