SAP UI5 SimpleForm 在 size XL 下的布局开发

Posted 2022-09-24

如果表单包含单个表单组，请使用标签字段比例为 3:5:4 的单列布局（标签使用 3 个网格列，字段使用 5 个网格列，以及 空列）。

如果将表单放入全屏应用程序中，您还可以使用属性 singleContainerFullSize 将 columnsXL 设置为 3，以 12:12:0 的标签字段比例用单个表单组填充一列（12 个网格列由 标签、字段使用的 12 个网格列和空列使用的 0 个网格列），并将第二列和第三列留空。

例子：Form with single group in a column layout - Size XL - (12:12:0)

如果表单包含多个表单组，还可以使用标签字段比例为 4:8:0 的两列布局（标签使用 4 个网格列，字段使用 8 个网格列，0 个网格列 由空列使用）。

如果将表单放入全屏应用中并且包含多个表单组，您还可以使用标签字段比例为 12:12:0 的三列布局（标签使用 12 个网格列，12 个网格 字段使用的列，空列使用的 0 个网格列）。

如果您对 XL 屏幕使用三列布局，请不要对 L 和 M 屏幕使用两列布局，因为它会产生大量空白。 在这种情况下，请改用单列布局。

下面是 2 列布局下，造成很多空白区域浪费的例子：

正确的做法是使用 single column 布局：

与所有其他 XL-L-M-S 属性不同，直到 SAPUI5 版本 1.34 的 labelSpanL 和 labelSpanM 不遵循 XL-L-M-S 大小范式。 LabelSpanL 在包含多于一列的布局中设置标签跨度，而 labelSpanM 在仅包含一列的布局中设置标签跨度。 自 1.34 版以来，这已更改。 由于向下兼容，新参数 adjustLabelSpan 是必要的。 同样由于向下兼容，它的默认值为“true”，这导致 labelSpan 属性的旧行为。 要实现 labelSpan 属性的新的、正确的行为，您必须将 adjustLabelSpan 设置为“false”。