如何以不可编辑的形式垂直对齐复选框？

Question

SAPUI5 简单表单不会使复选框垂直居中对齐。

代码如下：

<form:SimpleForm title="{i18n>wizardDateLocation}"
  minWidth="1024"
  editable="false"
  layout="ResponsiveGridLayout"
>
  <Label text="{i18n>wholeDay}"/>
  <CheckBox selected="{/IsAllDay}" editable="false"/>
  <Label text="{i18n>date}" visible="{= ${/IsAllDay}}" required="true"/>
  <Text text="{/Start}" visible="{= ${/IsAllDay}}"/>
  <HBox></HBox>
  <Label text="{i18n>from}" visible="{= !${/IsAllDay} }" required="true"/>
  <Text text="{/Start}" visible="{= !${/IsAllDay} }"/>
  <Label text="{i18n>to}" visible="{= !${/IsAllDay} }" required="true"/>
  <Text text="{/End}" visible="{= !${/IsAllDay} }"/>
  <Label text="{i18n>isOnlineMeeting}" required="false"/>
  <CheckBox selected="{/IsOnlineMeeting}" editable="false"/>
  <Label text="{i18n>location}" required="{= !${/IsOnlineMeeting} }"/>
  <Text text="{/LocationName}"/>
  <Label text="{i18n>weblink}" required="{/IsOnlineMeeting}"/>
  <Text text="{/WebLink}"/>
  <Link press="editStepTwo" text="{i18n>edit}"/>
</form:SimpleForm>

我该如何解决这个问题？

Answer 1

找到原因了。有点奇怪，但如果我们让简单的表格不可编辑，那么这个问题就会出现。解决方案是：

<form:SimpleForm editable="true">

Answer 2

UI5 提供 displayOnly 属性用于通常可编辑但以不可编辑形式出现的控件。

因此，不要让整个表单都可编辑，这很矛盾，因为其余的表单字段只是文本（不可编辑），请尝试在 CheckBoxes 上启用 displayOnly。

<form:SimpleForm editable="false">
  <!-- ... -->
  <CheckBox displayOnly="true" />
  <!-- ... -->
</form:SimpleForm>

来自 API reference：

displayOnly

When set to true, the CheckBox is not interactive, not editable, not focusable and not in the tab chain. This setting is used for forms in review mode.
When the property enabled is set to false this property has no effect.

如何以不可编辑的形式垂直对齐复选框？

How to align checkboxes vertically in a non-editable form?

checkbox

sapui5

`displayOnly`