我有一个简单的表单，如下所示:
代码:
<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"时，为什么输入是 越来越小？我给予更多空间并期望它更宽，因为我给予空间。
最佳答案
根据API:
- A new Title or Toolbar starts a new group (FormContainer) in the form.
- A new Label starts a new row (FormElement) in the form.
- All other controls will be assigned to the row (FormElement) that started with the last label.
代码示例使用 1 组 1 行。
columns<size>布局会按大小分为Column列
不使用跨度，这里是不同列的示例，每列有 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>
关于sapui5 - 表单布局到底是如何工作的？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48225139/