SAPUI5/OpenUI5开发：XML视图中固定顶部Shell Bar控件的正确添加位置

嘿，我刚好看过类似的场景，你碰到的问题其实是用错了Shell控件！你现在用的是sap.m.Shell，但要搭配sap.f.ShellBar实现固定顶部且符合letterboxing布局的效果，你需要用**sap.f.Shell**——这是官方专门为Flexible UI组件设计的容器，完美适配ShellBar。

sap.m.Shell确实只允许App作为唯一子元素，但sap.f.Shell不一样，它支持分别设置header和content两个区域：

• 把你的ShellBar放在header里，它会固定在页面顶部，属于根视图的一部分，切换路由页面时完全不会被替换
• 把管理页面切换的App控件放在content里，保留它的pages聚合功能，子视图切换完全不受影响
• 整个布局由sap.f.Shell控制，自动应用letterboxing的宽度限制，不会出现ShellBar铺满全屏的问题

给你一个正确的代码示例：

<mvc:View controllerName="webhrt.controller.App" xmlns="sap.m" xmlns:f="sap.f" xmlns:mvc="sap.ui.core.mvc" displayBlock="true">
  <f:Shell>
    <f:header>
      <f:ShellBar title="Funky Title" showNotifications="true" notificationsNumber="2" homeIcon="./static/logo.png">
        <f:menu>
          <Menu>
            <MenuItem text="{i18n>learnMenuEntry}" icon="sap-icon://e-learning"/>
            <MenuItem text="{i18n>catalogMenuEntry}" icon="sap-icon://course-book"/>
            <MenuItem text="{i18n>statisticsMenuEntry}" icon="sap-icon://line-chart"/>
            <MenuItem text="{i18n>settingsMenuEntry}" icon="sap-icon://settings"/>
          </Menu>
        </f:menu>
        <f:profile>
          <f:Avatar initials="UI"/>
        </f:profile>
      </f:ShellBar>
    </f:header>
    <f:content>
      <App>
        <pages>
          <Page title="{i18n>homePageTitle}">
            <content> [ ... ] </content>
          </Page>
        </pages>
      </App>
    </f:content>
  </f:Shell>
</mvc:View>

另外要注意，如果你的项目之前没引入sap.f库，需要在manifest.json里添加依赖：

"sap.ui5": {
  "dependencies": {
    "libs": {
      "sap.m": {},
      "sap.f": {}
    }
  }
}

这种方式是官方推荐的固定顶部导航的实现，完全符合你的需求：ShellBar只写一次，固定在顶部，子视图通过App的pages正常切换，还能保持正确的布局规范。

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