如何正确将ShellBar与Page或DynamicPage结合使用？

正确代码示例 #

<mvc:View 
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  xmlns:f="sap.f"
  height="100%"
>
  <VBox height="100%" renderType="Bare">
    <!-- 全局唯一的应用级ShellBar，固定在页面顶部 -->
    <f:ShellBar 
      title="应用名称"
      showCoPilot="true"
      showNotifications="true"
    />
    <!-- App设置占满剩余高度，内容滚动由内部Page控件处理 -->
    <App flex="1" width="100%" class="sapUiNoContentPadding">
      <pages>
        <!-- 此处可替换为sap.f.DynamicPage -->
        <Page title="页面标题">
          <content>
            <!-- 页面内容，如列表、表格等 -->
          </content>
        </Page>
      </pages>
    </App>
  </VBox>
</mvc:View>

之前实现的问题说明 #

• 把ShellBar放到App的pages聚合中：该聚合仅支持sap.m.Page类型控件，放入其他控件会打乱App的高度计算逻辑，导致列表/表格底部内容被遮挡。
• 未做弹性布局直接平级放置ShellBar和App：没有配置高度分配规则时，两个控件会分别触发滚动，出现双垂直滚动条的问题，通过VBox的弹性布局分配高度后，仅Page内部会出现滚动条，符合Fiori交互规范。
• 用sap.m.Shell嵌套App：sap.m.Shell是旧版应用外壳控件，默认不会自动渲染sap.f.ShellBar，当前Fiori 3+规范已不推荐这种嵌套方式，直接使用上述平级加弹性布局的方案即可。

额外注意事项 #

如果使用sap.f.DynamicPage，无需额外修改配置，直接替换上述示例中的Page控件即可，DynamicPage自带的滚动逻辑会自动适配外层布局。

内容的提问来源于stack exchange，提问作者Pieter