0
点赞
收藏
分享

微信扫一扫

SAP UI5 应用的屏幕尺寸检测工作原理深入剖析试读版


本教程之前的步骤:

​​SAP UI5 应用开发教程之一百三十四 - SAP UI5 Simple Form 属性 columnsL,columnsM,columnsXL 的属性深入剖析​​

我们深入分析了 SAP UI5 SimpleForm 控件属性 columnsL,columnsM,columnsXL 的工作原理。这里进行简单的回顾:

当我们在 ​​Display.fragment.xml​​ 里将 columnsXL,columnsL 和 columnsM 属性均设置为 1 时,下图代码第 9 行设置的 ResponsiveGridLayout, 即响应式网格布局,将 SimpleForm 控件的全部宽度(100%) 用来显示 Form 控件内包含的 Label 和 Text 元素。其原因是这三个属性的含义是响应式网格布局的列数,现在列数为 1,故 Form 内的 Label 和 Text 元素占据了 100% 的宽度。

SAP UI5 应用的屏幕尺寸检测工作原理深入剖析试读版_sap

下图是 columns 为 1 的效果,可以看到 SimpleForm 控件内的元素,水平方向撑满了整个屏幕:

SAP UI5 应用的屏幕尺寸检测工作原理深入剖析试读版_ui_02

columns 属性等于 2 的效果,SimpleForm 控件的布局分为了两列,每列占据 SimpleForm 宽度的​​二分之一​​:

SAP UI5 应用的屏幕尺寸检测工作原理深入剖析试读版_前端_03

columns 属性等于 3 的效果,SimpleForm 控件的布局分为了三列,每列占据 SimpleForm 宽度的​​三分之一​​:

SAP UI5 应用的屏幕尺寸检测工作原理深入剖析试读版_前端_04

然而,我们注意到,无论是 ​​columns​​​ 属性还是 ​​labelSpan​​ 属性,属性名后面还跟了类似 S,M,L 和 XL 的后缀。这些后缀与属性名一起,定义了 SAP UI5 SimpleForm 控件在不同尺寸的屏幕下的不同行为。

SAP UI5 应用的屏幕尺寸检测工作原理深入剖析试读版_sap_05

​​本步骤​​将详细介绍 SAP UI5 应用屏幕尺寸类型(S,M,L 和 XL) 的判定原理。


举报

相关推荐

0 条评论