为什么某些 UI 组件的高度比平时小？

Question

我创建了两个应用程序，它们的内容相同。
App 1 是使用 Flexbile 列布局创建的：

应用程序 2 没有：

如您所知，UI 应用程序 2 上的组件比应用程序 1 上的组件大。

我在两者上使用相同的控件：

<Page id="page" title="{i18n>title}">
  <FlexBox alignItems="Start" justifyContent="Center">
    <l:Grid containerQuery="true" defaultSpan="XL12 L12 M12 S12">
      <Label text=""/>
      <Text text="Hello Kitty"/>
      <Input placeholder="Enter your email address" id="email" type="Email" value="{confirm>/email}" liveChange="onHandleLiveChangeEmail"/>
      <Button type="Accept" enabled="{confirm>/enable}" text="Hello" press=".handlePressAuthorization" width="100%" />
    </l:Grid>
  </FlexBox>
</Page>

不幸的是，除了 App 1 使用灵活的列布局运行之外，我无法弄清楚差异在哪里。

两个应用都托管在 GitHub:

Answer 1

应用 1 在 <body> 的 class 列表中有 sapUiSizeCompact（参见 index.html at line 34）。

App 2 没有它，在这种情况下应用默认密度 class (sapUiSizeCozy)。

有关更多信息和其他密度选项，请参阅文档中的步骤 Content Density from the walkthrough as well as the corresponding topic。

为什么某些 UI 组件的高度比平时小？

Why are heights of some UI components smaller than usual?

sapui5