OpenUI5 中 formContainers 中的两列标签

Question

我正在使用：

<f:layout>
         <f:ResponsiveGridLayout columnsM="1"/>
</f:layout>

当我添加许多带有文本的标签时：

 <f:FormElement label="{i18n>va1}">
        <f:fields>
            <Text
                text="{data>/customer/name}"
            />
        </f:fields>
 </f:FormElement>

然后看起来像这样：

label: text
label: text
label: text
label: text

我想要这个：

label:text    label:text
label:text    label:text

我怎样才能做到这一点？

@编辑

 <Panel>
            <my:FormPanel>
                <f:Form id="id-form" editable="true">
                    <f:layout>
                        <f:ResponsiveGridLayout columnsM="1"/>
                    </f:layout>
                    <f:formContainers>
                        <f:FormContainer>
                            <f:title>
                                <Title text="title"/>
                            </f:title>
                            <f:formElements>
                                <f:FormElement label="lab1">
                                    <f:fields>
                                        <Text text="text1" />
                                    </f:fields>
                                </f:FormElement>
                                <f:FormElement label="lab2">
                                    <f:fields>
                                        <Text text="text2" />
                                    </f:fields>
                                </f:FormElement>
                                <f:FormElement label="lab3">
                                    <f:fields>
                                        <Text text="text3"/>
                                    </f:fields>
                                </f:FormElement>
                                <f:FormElement label="lab4">
                                    <f:fields>
                                        <Text text="text4" />
                                    </f:fields>
                                </f:FormElement>
                            </f:formElements>
                        </f:FormContainer>
                    </f:formContainers>
                </f:Form>
            </FormPanel>
        </Panel>

我正在考虑一些网格布局或将 lab1 和 lab2 打包到一个容器中，将 lab3 和 lab4 打包到另一个容器中。

Answer 1

您可以使用 span 和 layoutData

来实现

<VBox class="sapUiSmallMargin">
    <f:Form editable="true">
        <f:layout>
            <f:ResponsiveGridLayout
                    labelSpanXL="1" labelSpanL="1" labelSpanM="1" labelSpanS="1"
                    emptySpanXL="4" emptySpanL="4" emptySpanM="4" emptySpanS="0"
                    columnsXL="1" columnsL="1" columnsM="1"
                    singleContainerFullSize="false" adjustLabelSpan="false"/>
        </f:layout>
        <f:formContainers>
            <f:FormContainer>
                <f:formElements>
                    <f:FormElement label="Label">
                        <f:fields>
                            <Text text="Text" >
                                <layoutData>
                                    <l:GridData span="XL1 L2 M2 S4" />
                                </layoutData>
                            </Text>
                            <Text text="Label:" class="cLabel">
                                <layoutData>
                                    <l:GridData span="XL1 L1 M1 S1" />
                                </layoutData>
                            </Text>
                            <Text text="Text" >
                                <layoutData>
                                    <l:GridData span="XL1 L2 M2 S4" />
                                </layoutData>
                            </Text>
                        </f:fields>
                    </f:FormElement>
                    <f:FormElement label="Label">
                        <f:fields>
                            <Text text="Text" >
                                <layoutData>
                                    <l:GridData span="XL1 L2 M2 S4" />
                                </layoutData>
                            </Text>
                            <Text text="Label:" class="cLabel">
                                <layoutData>
                                    <l:GridData span="XL1 L1 M1 S1" />
                                </layoutData>
                            </Text>
                            <Text text="Text" >
                                <layoutData>
                                    <l:GridData span="XL1 L2 M2 S4" />
                                </layoutData>
                            </Text>
                        </f:fields>
                    </f:FormElement>
                </f:formElements>
            </f:FormContainer>
        </f:formContainers>
    </f:Form>
</VBox>

CSS

.cLabel.sapMText {
  color: #666;
}

输出

注意：根据您的要求调整 span 值

OpenUI5 中 formContainers 中的两列标签

Two columns of labels in formContainers in OpenUI5

xml

layout

sapui5