时间戳

首页 > 解决方案 > 如何将多个复选框与其标签放在一行中？

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

问题描述

我想用智能字段设计类似下图的东西：

在此处输入图像描述

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

<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>

但仍然存在一些问题。元素仍未调整。这是输出：

在查看模式下： 在此处输入图像描述

在编辑模式下： 在此处输入图像描述

标签： sapui5

解决方案

这是答案。我必须为每个元素使用不同的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>

仍然不是一个完美的解决方案，因为可以看出第一行和第二行的空白空间之间存在一些差异，但仍然可以忽略不计！

推荐阅读