SAP UI5 SimpleForm 里在水平方向显示多组 Fo

本教程前几个步骤，介绍了如何在 SAP UI5 SimpleForm 控件里显示单组的元素，如下图所示：

并且我们花费了整整 4 个步骤的篇幅，重点讲解了 SAP UI5 屏幕宽度类型检测的实现原理，以及 columns 和 labelSpan 系列属性的工作原理。

• SAP UI5 应用开发教程之一百三十二 - SAP UI5 Simple Form 控件的使用方法介绍

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

• SAP UI5 应用开发教程之一百三十五 - SAP UI5 应用的屏幕尺寸检测工作原理深入剖析

• SAP UI5 应用开发教程之一百三十六 - SAP UI5 应用 SimpleForm 控件 ResponsiveGridLayout 布局的工作原理深入剖析

相信几乎所有学习者在跟着本教程的步骤做练习时，使用的都是笔记本电脑或者台式机，根据笔者步骤 135 的介绍，在这些环境下，SAP UI5 调用函数 Device.media.getCurrentRange 返回的屏幕类型，在 Range Set StdExt 里的记录为 Desktop：

我们把水平方向上从左到右显示的一个 Label 控件和一个与之匹配的 Text 控件，看作一组 Form 元素。

在 Desktop 这种宽屏下，如果水平方向上一行只显示一组 Form 元素，未免有点浪费屏幕空间了。

本步骤我们介绍一种方式，可以使用 SimpleForm 的 ResponsiveGridLayout(响应式网格布局)，把 SimpleForm 占据的屏幕宽度平均分为三个网格，每个网格内显示一组 Form 元素，如下图所示：

然后我们进入 Chrome 开发者工具，点击下图图标1 所示的设备模拟的按钮，然后从图例2的模拟设备列表里，选择 iPAD Air，然后响应式网格布局里的网格个数自动从 3 个变为了 2个，如下图所示：

下面是这个响应式效果的具体的实现步骤。