如何将多个复选框与其标签放在一行中？

Question

我想用智能字段设计如下图：

当我尝试使用以下代码进行设计时：

<smartForm:GroupElement>
    <smartField:SmartField value="{Vermieter}"/>
    <smartField:SmartField value="{HIT}" textLabel="HIT"/>
    <smartField:SmartField value="{Konzessionär}" textLabel="Konzessionär"/>
</smartForm:GroupElement>

我收到的结果如下：

首先缺少标签。

其次，位置并不完全正确。第二项和第三项之间的距离与我们第一项和第二项之间的距离不一样。

有什么建议吗？

更新

感谢@MrNajzs 的，我取得了以下进展：

<smartForm:GroupElement>
    <smartField:SmartLabel labelFor="Vermieter"/>
    <smartField:SmartField value="{Vermieter}" id="Vermieter"/>
    <smartField:SmartLabel labelFor="HIT"/>
    <smartField:SmartField value="{HIT}" id="HIT"/>
    <smartField:SmartLabel labelFor="Konzessionaer"/>
    <smartField:SmartField value="{Konzessionär}" id="Konzessionaer"/>
</smartForm:GroupElement>

但还是有一些问题。元素仍未调整。这是输出：

在查看模式下：

并且在编辑模式下：

Answer 1

您可以通过在 SmartField 之前放置 SmartLabel 来“激活”标签。在 SmartLabel 中，您需要通过其 Id 引用 SmartField（如下所示）

<smartField:SmartLabel labelFor="idHIT" />
<smartField:SmartField id="idHIT" value="{HIT}" textLabel="HIT"/>

要控制布局，您可能需要探索 smartField:layoutData 元素。在此范围内，您可以使用布局命名空间中的 GridData 元素。但是这里有很多选择。

Answer 2

答案在这里。我必须为每个元素使用不同的 Group 并使用 GridData 布局。

<smartForm:SmartForm flexEnabled="false">
    <smartForm:Group >
        <smartForm:GroupElement>
            <smartField:SmartField value="{RstID}" width="auto" contextEditable="true" >
                <smartField:configuration>
                    <smartField:Configuration preventInitialDataFetchInValueHelpDialog="false" displayBehaviour="descriptionOnly"/>
                </smartField:configuration>
            </smartField:SmartField>
        </smartForm:GroupElement>
    </smartForm:Group>
</smartForm:SmartForm>
<smartForm:SmartForm flexEnabled="false">
    <smartForm:layout>
        <smartForm:Layout labelSpanL="9" labelSpanM="9" labelSpanS="12" columnsL="3" columnsM="3" />
    </smartForm:layout>
    <smartForm:Group>
        <smartForm:layoutData>
            <l:GridData span="L4 M3 S6" indent="L1 M3"/>
        </smartForm:layoutData>
        <smartForm:GroupElement>
            <smartField:SmartField value="{Vermieter}"/>
        </smartForm:GroupElement>
    </smartForm:Group>
    <smartForm:Group>
        <smartForm:layoutData>
            <l:GridData span="L3 M3 S6"/>
        </smartForm:layoutData>
        <smartForm:GroupElement>
            <smartField:SmartField value="{HIT}"/>
        </smartForm:GroupElement>
    </smartForm:Group>
    <smartForm:Group>
        <smartForm:layoutData>
            <l:GridData span="L3 M3 S6"/>
        </smartForm:layoutData>
        <smartForm:GroupElement>
            <smartField:SmartField value="{Konzessionär}"/>
        </smartForm:GroupElement>
    </smartForm:Group>
</smartForm:SmartForm>

仍然不是一个完美的解决方案，可以看出第一行和第二行的空 space 有一些不同，但仍然可以忽略！

如何将多个复选框与其标签放在一行中？

How can I put multiple check-boxes in one line with their labels?

sapui5