如何将 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 中定义的根视图元素的第一个内容，这会产生双垂直滚动条。

我还尝试在应用程序周围放置一个 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

示例：https://plnkr.co/edit/LkGOQJt0xd6kNVuX

我假设您希望 ShellBar 始终在顶部可见。上面的示例将栏放置在根视图中，以便无论用户导航到何处，它始终存在。

通过利用sap.m.NavContainer，屏幕上不会出现任何内容：

sap.f.ShellBar和sap.f.DynamicPage

示例： 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 设计指南保持一致。sap.m.NavContainer在内部，FlexibleColumnLayout对其三列中的每一列也使用了。