sapui5 - 如何将 ShellBar 与 Page 或 DynamicPage 结合使用？

Question

代码示例:https://plnkr.co/edit/KPLJXzI4n1L0fG4Z

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:f="sap.f">
  <App>
    <pages>
      <f:ShellBar />
      <PageOrDynamicPage>
        <!-- ... -->
      </PageOrDynamicPage>
    </pages>
  </App>
</mvc:View>

列表/响应表的最后一行在屏幕外。

第 100 个项目不可见。
我还尝试将 ShellBar 添加为 App.view.xml 中定义的根 View 元素的第一个内容，这会导致双垂直滚动条。
我还尝试在应用程序周围放置一个 Shell 而不是单独的 ShellBar，但该栏没有显示: https://plnkr.co/edit/Tmk6vd5CF4IEZC2y .

Answer 1

问题是sap.f.ShellBar是一个固定高度的酒吧。如果同级(例如 sap.m.Page )试图达到 100% 的高度，它将向下推内容。这可以通过将内容添加到单独的 sap.m.NavContainer 来避免。 .sap.f.ShellBar与 sap.m.Page sample :https://plnkr.co/edit/LkGOQJt0xd6kNVuX
我假设您希望 ShellBar 始终在顶部可见。上面的示例将栏放在根 View 中，因此无论用户导航到哪里，它始终存在。
通过利用 sap.m.NavContainer , 屏幕外没有内容:
sap.f.ShellBar与 sap.f.DynamicPage sample :https://openui5.hana.ondemand.com/entity/sap.f.ShellBar/sample/sap.f.sample.ShellBarWithFlexibleColumnLayout
它利用 sap.f.FlexibleColumnLayout , sap.f.DynamicPage , 和 sap.f.routing.Router以符合当前的 Fiori 设计指南。在内部，FlexibleColumnLayout 使用 sap.m.NavContainer它的三列中的每一列也是如此。