Question

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

代码：

<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"时，为什么输入为越来越小？我给予更多空间并期望它更宽，因为我给空间。

Answer 1

根据API：

新标题或工具栏在表单中启动新组（FormContainer）。

新标签在表单中开始一个新行（FormElement）。

所有其他控件将分配给以最后一个标签开头的行（FormElement）。

代码示例使用1组1行。

columns<size>布局将分为大小

的列列

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

<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>

Answer 2

更改列L =＆＃34; 1＆＃34;对于columnsL =＆＃34; 4＆＃34;，输入变得越来越小，因为＆＃34; columnsL＆＃34; attribute代表＆＃34;大尺寸的列数＆＃34;。这意味着如果您希望页面中有4列并且不提供任何宽度，则每列的宽度为父组件宽度的25％。显然它们将小于1列。

link：more info

编辑：您在simpleForm中使用了ResponsiveGridLayout。如果您希望您的输入具有相同的宽度，那么只需使用＆＃34; layoutdata＆＃34;。

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

表单布局如何正常工作？

2 个答案: