Sapui5 表单布局究竟是如何工作的？

我有一个简单的表单，如下所示：

守则：

<VBox class="sapUiSmallMargin">
    <sf:SimpleForm id="PayerSel" editable="true" layout="ResponsiveGridLayout" labelSpanXL="1" labelSpanL="1" labelSpanM="1" labelSpanS="12"
        adjustLabelSpan="false" emptySpanXL="5" emptySpanL="5" emptySpanM="5" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1"
        singleContainerFullSize="false">
        <sf:content>
            <Label text="Payers"></Label>
            <Input id="payerFrom" placeholder="From" required="true"/>
            <Input id="payerTo" placeholder="Until" required="true"/>
        </sf:content>
    </sf:SimpleForm>
</VBox>

问题是:

如何配置两个输入具有相同的长度？ 当我将columnsL=1更改为columnsL=4时，为什么输入是 变小了？我给予更多的空间，并期望它更宽，因为我给予空间。

---

当您将columnsL=1更改为columnsL=4时，输入会变小，因为columnsL属性表示大尺寸的列数。这意味着，如果您希望页面中有4列，但不提供任何宽度，则每列的宽度都是父组件宽度的25%。显然，它们将小于1列

链接：

编辑：您正在simpleForm中使用ResponsiveGridLayout。如果希望输入具有相同的宽度，则只需使用layoutdata

<Input id="payerFrom" placeholder="From" required="true">
   <layoutData>
        <l:GridData span="L4 M6 S12"/> //for example
   </layoutData>
</>

根据API：

新标题或工具栏将在表单中启动新组FormContainer。 新标签将在表单中启动新行FormElement。 所有其他控件将分配给以最后一个标签开始的行FormElement。 代码示例使用1个组和1行

列布局将按大小分为列

在不使用跨距的情况下，这里是一个不同列的示例，每列有一行，标签宽度+输入宽度+输入宽度=2+5+5，所有大小：-尝试调整浏览器窗口的大小并检查结果

<core:FragmentDefinition xmlns="sap.m" xmlns:l="sap.ui.layout"
        xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core">
    <VBox class="sapUiSmallMargin">
        <f:SimpleForm id="PayerSel" editable="true"
                layout="ResponsiveGridLayout"
                labelSpanXL="0"
                labelSpanL="0"
                labelSpanM="0"
                labelSpanS="0"
                columnsL="1">
            <f:content>
                <Label text="Payers">
                    <layoutData>
                        <l:GridData span="L2 M2 S2"/>
                    </layoutData>
                </Label>
                <Input id="payerFrom" placeholder="From" required="true">
                    <layoutData>
                        <l:GridData span="L5 M5 S5"/>
                    </layoutData>
                </Input>
                <Input id="payerTo" placeholder="Until" required="true">
                    <layoutData>
                        <l:GridData span="L5 M5 S5"/>
                    </layoutData>
                </Input>
            </f:content>
        </f:SimpleForm>
        <f:SimpleForm id="PayerSel2" editable="true"
                layout="ResponsiveGridLayout"
                labelSpanXL="0"
                labelSpanL="0"
                labelSpanM="0"
                labelSpanS="0"
                columnsL="2"
                columnsM="2">
            <f:content>
                <core:Title text="group1"/>
                <Label text="Payers">
                    <layoutData>
                        <l:GridData span="L2 M2 S2"/>
                    </layoutData>
                </Label>
                <Input id="payerFrom2" placeholder="From" required="true">
                    <layoutData>
                        <l:GridData span="L5 M5 S5"/>
                    </layoutData>
                </Input>
                <Input id="payerTo2" placeholder="Until" required="true">
                    <layoutData>
                        <l:GridData span="L5 M5 S5"/>
                    </layoutData>
                </Input>
                <core:Title text="group2"/>
                <Label text="Payers">
                    <layoutData>
                        <l:GridData span="L2 M2 S2"/>
                    </layoutData>
                </Label>
                <Input id="payerFrom3" placeholder="From" required="true">
                    <layoutData>
                        <l:GridData span="L5 M5 S5"/>
                    </layoutData>
                </Input>
                <Input id="payerTo3" placeholder="Until" required="true">
                    <layoutData>
                        <l:GridData span="L5 M5 S5"/>
                    </layoutData>
                </Input>
            </f:content>
        </f:SimpleForm>
        <f:SimpleForm id="PayerSel3" editable="true"
                layout="ResponsiveGridLayout"
                labelSpanXL="0"
                labelSpanL="0"
                labelSpanM="0"
                labelSpanS="0"
                columnsL="3"
                columnsM="3">
            <f:content>
                <core:Title text="group1"/>
                <Label text="Payers">
                    <layoutData>
                        <l:GridData span="L2 M2 S2"/>
                    </layoutData>
                </Label>
                <Input id="payerFrom32" placeholder="From" required="true">
                    <layoutData>
                        <l:GridData span="L5 M5 S5"/>
                    </layoutData>
                </Input>
                <Input id="payerTo32" placeholder="Until" required="true">
                    <layoutData>
                        <l:GridData span="L5 M5 S5"/>
                    </layoutData>
                </Input>
                <core:Title text="group2"/>
                <Label text="Payers">
                    <layoutData>
                        <l:GridData span="L2 M2 S2"/>
                    </layoutData>
                </Label>
                <Input id="payerFrom33" placeholder="From" required="true">
                    <layoutData>
                        <l:GridData span="L5 M5 S5"/>
                    </layoutData>
                </Input>
                <Input id="payerTo33" placeholder="Until" required="true">
                    <layoutData>
                        <l:GridData span="L5 M5 S5"/>
                    </layoutData>
                </Input>
                <core:Title text="group3"/>
                <Label text="Payers">
                    <layoutData>
                        <l:GridData span="L2 M2 S2"/>
                    </layoutData>
                </Label>
                <Input id="payerFrom34" placeholder="From" required="true">
                    <layoutData>
                        <l:GridData span="L5 M5 S5"/>
                    </layoutData>
                </Input>
                <Input id="payerTo34" placeholder="Until" required="true">
                    <layoutData>
                        <l:GridData span="L5 M5 S5"/>
                    </layoutData>
                </Input>
            </f:content>
        </f:SimpleForm>
    </VBox>
</core:FragmentDefinition>

---

首先感谢您的回复。整个屏幕被分成12个相等的块，比例是多少：这意味着1:1:5？如果是，它不满足12格的数量。比率是12，除非你改变它：简单地说：鉴于我们有一个大屏幕。emptySpanL=5：空跨距占用5个块。labelSpanL=1：标签占用1个块。columnsL=1：这里您希望1列占用6个块。你可以看到这就是我们所有的一切你想在那之后改变它吗？请看我在答案中的编辑。在这里，我们希望输入占用4个块。我们现在有什么？两个街区。如果需要，您可以在此处添加另一个输入。columnsL=1意味着什么，它将在大屏幕上只显示一列？是的，它意味着：大尺寸的表单列否与网格列混淆。表格将被分割/将包含一个大尺寸的表格列，表示每个表格行有一个水平块。因此，标签和两个输入将在一行中，全格式宽度-在大尺寸中，比率将为2:5:5 L2 L5 L5在GridData中检查：在大尺寸中，第一行的columnsL=1，第二行的columnsL=2有两组，最后三组的columnsL=3