checkbox - 如何在不可编辑的表单中垂直对齐复选框？

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

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

因此，不要让整个表单可编辑，这是矛盾的，因为其余的表单字段只是文本(不可编辑)，尝试启用 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.