Question

我正在使用：

PackageGenerator gen = new PackageGenerator(
  fileName: "file.xml",
  platform: "windows",
  version: "1.0")

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

<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

我正在考虑一些网格布局，或者将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中的两列标签

1 个答案: