UI5 的拆分面板中是否可以有 2 个 NavContainer？答案

【问题标题】：Is it possible to have 2 NavContainers in a splitted panel in UI5?UI5 的拆分面板中是否可以有 2 个 NavContainer？
【发布时间】：2020-10-30 16:30:31
【问题描述】：

在一个分割面板中是否可以有两个NavContainers？

我尝试如下所示，但子视图中没有显示任何内容，只有两侧为空的拆分面板。错误日志什么也没说。
当我将第一个 NavContainer 作为第一个元素放在页面元素的内容标记内时，会呈现第一个容器的视图。（查看视图定义中的注释行）

<mvc:View
        controllerName="my.controller.parent"
        xmlns="sap.m"
        ..
        id="splittedContainers" xmlns:m="sap.m">
    <Page id="myPage" class="sapUiSizeCompact sapUiTinyMargin" title="myTitle">
        <!-- Putting the NavContainer here seems to work -->**
        <content class="sapUiSizeCompact sapUiTinyMargin">
            <Panel class="sapUiSizeCompact sapUiTinyMargin">
                <content>
                    <l:Splitter orientation="Horizontal">
                        <l:contentAreas>
                            <Panel width="100%">
                                <layoutData>
                                    <l:SplitterLayoutData size="auto" />
                                </layoutData>
                                <NavContainer id="childNav1">
                                    <pages>
                                    </pages>
                                </NavContainer>             
                            </Panel>
                            <Panel>
                                <layoutData>
                                    <l:SplitterLayoutData size="300px" />
                                </layoutData>
                                <NavContainer id="childNav2">
                                    <pages>
                                    </pages>
                                </NavContainer>             
                            </Panel>
                        </l:contentAreas>
                    </l:Splitter>

                </content>
            </Panel>
        </content>
    </Page>
</mvc:View>

manifest.json：

..
        "routes": {
          "rBoth": {
            "pattern": "both",
            "target": "parentTarget"
          },
          "rChild1": {
            "pattern": "both/first",
            "target": "tChild1"
          },
          "rChild2": {
            "pattern": "both/second",
            "target": "tChild2"
          }
..

..
    "targets": {
        "parentTarget": {
          "viewPath": "my.view",
          "viewName": "SplitParentView",
          "parent": "firstLvlTarget",
          "controlId": "pageContainer",
          "controlAggregation": "pages",
          "transition": "flip",
          "viewLevel": 2
        },
        "tChild1": {
            "viewPath": "my.view.childs",
            "viewName": "ChildView1",
            "parent": "parentTarget",
            "controlId": "childNav1",
            "controlAggregation": "pages",
            "transition": "flip",
            "viewLevel": 3
        },
        "tChild2": {
          "viewPath": "my.view.childs",
          "viewName": "ChildView2",
          "parent": "parentTarget",
          "controlId": "childNav2",
          "controlAggregation": "pages",
          "transition": "flip",
          "viewLevel": 3
        },
..

【问题讨论】：

标签： routes navigation sapui5 splitter

【解决方案1】：

你想通过这个实现什么？大多数屏幕的宽度大于高度，因此FlexibleColumnLayout 在大多数情况下都有帮助。

NavContainer 有一个 pages-Aggregation。

这些可以是 sap.m.Page、sap.ui.core.View、sap.m.Carousel 或任何其他具有全屏/页面语义的控件。”

我认为面板不能成为此类控件的合适父级。

如果你只想要水平分割，你可以使用带有Sections and Subsections的ObjectPage

【讨论】：

谢谢。你是对的，水平分割是我正在寻找的。 ObjectPageLayout 看起来很有趣，我试试看。
这似乎有效。如果我使用带有两个块的 ObjectPageSubSection，一个用于我要显示的每个视图，则这两个视图在两列中彼此相邻放置。再次感谢。