UI5 Fiori：如何让SimpleForm分组标题与FormElements对齐且元素同行

要实现SimpleForm中分组标题与FormElements区块对齐，同时保持Label和Text横向排列，可通过以下两种方式实现：

方式一：使用FormContainer分组（推荐） #

利用form:FormContainer包裹每组元素，其标题会自动与内部FormElements对齐，同时通过调整网格参数保证元素横向排列：

<form:SimpleForm
    title="Databinding basics: SimpleForm - Beispiel"
    layout="ResponsiveGridLayout"
    editable="true"
    columnsM="1"
    columnsL="1"
    columnsXL="3"
    labelSpanS="12"
    labelSpanM="4"
    labelSpanL="12"
    labelSpanXL="3"
    fieldSpanXL="9"
    emptySpanS="0"
    emptySpanM="0"
    emptySpanL="0"
    emptySpanXL="0"
    singleContainerFullSize="false">
    <form:content>
        <!-- 第一组 -->
        <form:FormContainer title="First Group">
            <form:formElements>
                <form:FormElement>
                    <form:label>
                        <Label text="Enabled8"/>
                    </form:label>
                    <form:fields>
                        <Text text="Yes"/>
                    </form:fields>
                </form:FormElement>
                <form:FormElement>
                    <form:label>
                        <Label text="Enabled7"/>
                    </form:label>
                    <form:fields>
                        <Text text="Yes"/>
                    </form:fields>
                </form:FormElement>
                <form:FormElement>
                    <form:label>
                        <Label text="Enabled8"/>
                    </form:label>
                    <form:fields>
                        <Text text="Yes"/>
                    </form:fields>
                </form:FormElement>
            </form:formElements>
        </form:FormContainer>

        <!-- 第二组 -->
        <form:FormContainer title="Second Group">
            <form:formElements>
                <form:FormElement>
                    <form:label>
                        <Label text="Enabled7"/>
                    </form:label>
                    <form:fields>
                        <Text text="Yes"/>
                    </form:fields>
                </form:FormElement>
                <form:FormElement>
                    <form:label>
                        <Label text="Enabled8"/>
                    </form:label>
                    <form:fields>
                        <Text text="Yes"/>
                    </form:fields>
                </form:FormElement>
                <form:FormElement>
                    <form:label>
                        <Label text="Enabled7"/>
                    </form:label>
                    <form:fields>
                        <Text text="Yes"/>
                    </form:fields>
                </form:FormElement>
                <form:FormElement>
                    <form:label>
                        <Label text="Enabled8"/>
                    </form:label>
                    <form:fields>
                        <Text text="Yes"/>
                    </form:fields>
                </form:FormElement>
            </form:formElements>
        </form:FormContainer>
    </form:content>
</form:SimpleForm>

关键说明： #

• form:FormContainer：分组容器的标题会自动继承SimpleForm的布局网格，与内部元素左对齐，无需手动调整间距。
• form:FormElement：明确Label与Text的配对关系，让ResponsiveGridLayout正确分配列布局，保证Label和Text横向排列在同一行。
• labelSpanXL与fieldSpanXL：两者总和为12（UI5网格的基础列数），配合columnsXL="3"，每个FormElement占据1/3行宽，3个元素刚好填满一行。

方式二：保留core:Title并调整布局数据 #

如果坚持使用core:Title作为分组标题，可通过添加GridData控制标题的跨度与边距，实现对齐：

<form:SimpleForm
    title="Databinding basics: SimpleForm - Beispiel"
    layout="ResponsiveGridLayout"
    editable="true"
    columnsM="1"
    columnsL="1"
    columnsXL="3"
    labelSpanS="12"
    labelSpanM="4"
    labelSpanL="12"
    labelSpanXL="3"
    fieldSpanXL="9"
    emptySpanS="0"
    emptySpanM="0"
    emptySpanL="0"
    emptySpanXL="0"
    singleContainerFullSize="false">
    <form:content>
        <core:Title text="First Group" emphasized="false" level="H4">
            <layoutData>
                <l:GridData span="XL12" margin="false"/>
            </layoutData>
        </core:Title>
        <form:FormElement>
            <form:label>
                <Label text="Enabled8"/>
            </form:label>
            <form:fields>
                <Text text="Yes"/>
            </form:fields>
        </form:FormElement>
        <form:FormElement>
            <form:label>
                <Label text="Enabled7"/>
            </form:label>
            <form:fields>
                <Text text="Yes"/>
            </form:fields>
        </form:FormElement>
        <form:FormElement>
            <form:label>
                <Label text="Enabled8"/>
            </form:label>
            <form:fields>
                <Text text="Yes"/>
            </form:fields>
        </form:FormElement>

        <core:Title text="Second Group" emphasized="false" level="H4">
            <layoutData>
                <l:GridData span="XL12" margin="false"/>
            </layoutData>
        </core:Title>
        <form:FormElement>
            <form:label>
                <Label text="Enabled7"/>
            </form:label>
            <form:fields>
                <Text text="Yes"/>
            </form:fields>
        </form:FormElement>
        <form:FormElement>
            <form:label>
                <Label text="Enabled8"/>
            </form:label>
            <form:fields>
                <Text text="Yes"/>
            </form:fields>
        </form:FormElement>
        <form:FormElement>
            <form:label>
                <Label text="Enabled7"/>
            </form:label>
            <form:fields>
                <Text text="Yes"/>
            </form:fields>
        </form:FormElement>
        <form:FormElement>
            <form:label>
                <Label text="Enabled8"/>
            </form:label>
            <form:fields>
                <Text text="Yes"/>
            </form:fields>
        </form:FormElement>
    </form:content>
</form:SimpleForm>

关键说明： #

• 给core:Title添加l:GridData，设置span="XL12"让标题占满整行，margin="false"消除默认边距，保证与下方元素左对齐。
• 同样需要用form:FormElement包裹Label和Text，确保横向排列的布局稳定性。

内容的提问来源于stack exchange，提问作者Roman