本教程之前的步骤:
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% 的宽度。
下图是 columns 为 1 的效果,可以看到 SimpleForm 控件内的元素,水平方向撑满了整个屏幕:
columns 属性等于 2 的效果,SimpleForm 控件的布局分为了两列,每列占据 SimpleForm 宽度的二分之一
:
columns 属性等于 3 的效果,SimpleForm 控件的布局分为了三列,每列占据 SimpleForm 宽度的三分之一
:
然而,我们注意到,无论是 columns
属性还是 labelSpan
属性,属性名后面还跟了类似 S,M,L 和 XL 的后缀。这些后缀与属性名一起,定义了 SAP UI5 SimpleForm 控件在不同尺寸的屏幕下的不同行为。
本步骤将详细介绍 SAP UI5 应用屏幕尺寸类型(S,M,L 和 XL) 的判定原理。