形式：使同一行的字段具有相同的长度

Question

在这个 sap.ui.layout.form.SimpleForm 中，我在同一行中有 2 个控件。现在，如果不对它们进行任何格式化，它们会有些不均匀。如何让这两个控件都占据总行的 50% space?

Answer 1

我想这可以在下面的示例中看到：

https://sapui5.hana.ondemand.com/#/entity/sap.ui.layout.form.SimpleForm/sample/sap.ui.layout.sample.SimpleFormToolbar

基本上所有控件都有聚合<layoutData>。您可以在那里添加自己的布局信息：

<Input value="{ZIPCode}">
    <layoutData>
        <l:GridData span="XL2 L1 M3 S4" />
    </layoutData>
</Input>

当然这也适用于Select。

现在您只需确定要传递给 span 属性:

的内容

通常布局基于 12 列网格。您必须为您的 Labels 分配一些列，最后可能有一些空的 space，其余的属于您的 Inputs 或 Selects。

您的 SimpleForm 可能具有以下属性：

<f:SimpleForm layout="ResponsiveGridLayout"
    labelSpanXL="4"
    labelSpanL="4"
    labelSpanM="4"
    labelSpanS="12"
    emptySpanXL="0"
    emptySpanL="4"
    emptySpanM="0"
    emptySpanS="0">

因此，对于 XL，您会看到 4 列已经属于 Label，最后 0 为空 space，因此您还剩下 8 列。因此，两个表单控件都应该有 4 列。 L 有 4 Label 列和 4 个空列，因此每个表单控件应该有 2 列。 M 类似于 XL。对于 Label，S 已经有 12 列。因此，您的控件将被推入 Label 下面的第二行，每个控件都可以使用 6 列。

因此在该示例中，我建议将以下 layoutData 传递给两个控件，以便它们相等 space。如果您的 SimpleForm 标签 space 的值不同，结束为空 space 那么您必须重新计算。

<l:GridData span="XL4 L2 M4 S6" />

记得在 View 的开头声明 l 名称space 以便您可以使用 GridData 控件：

<mvc:View
    ...
    ...
    xmlns:l="sap.ui.layout">

形式：使同一行的字段具有相同的长度

Form: make fields in the same row have the same length

sapui5