UI5嵌套视图中仅为View1添加Overflow Toolbar的问题

这个问题其实很常见——多层Page嵌套容易搞乱布局上下文，导致Toolbar的显示不符合预期。咱们直接调整结构，不用嵌套Page，改用Flex布局就能完美解决：

核心思路 #

UI5的Page是页面级容器，不建议嵌套使用。咱们把View1里的内部Page去掉，换成VBox作为容器，通过Flex布局让Table占满剩余空间，OverflowToolbar固定在View1的底部。同时父视图也做小调整，确保嵌套视图能获取到正确的高度。

父视图代码调整 #

先给父视图的content区域加上VBox，确保两个嵌套视图能垂直排列并占满可用高度：

<mvc:View>
  <Page showNavButton="true" navButtonPress="onNavBack" class="sapUiFullHeight">
    <content>
      <Toolbar>
        <ToolbarSpacer/>
        <SegmentedButton id="A" selectedKey="B" select="handel">
          <items>
            <SegmentedButtonItem key="C" text="C"/>
            <SegmentedButtonItem key="D" text="D"/>
          </items>
        </SegmentedButton>
        <ToolbarSpacer/>
      </Toolbar>
      <!-- 用VBox包裹两个嵌套视图，确保高度占满 -->
      <VBox height="100%" displayFlex="true" flexDirection="Column" class="sapUiTinyMarginTop">
        <mvc:XMLView viewName="F.View1" flexGrow="1"/>
        <mvc:XMLView viewName="G.View2" flexGrow="1"/>
      </VBox>
    </content>
  </Page>
</mvc:View>

View1代码修改 #

去掉内部的Page，改用VBox来组织Table和OverflowToolbar，通过Flex属性让Toolbar固定在底部：

<mvc:View class="sapUiFullHeight">
  <VBox height="100%" displayFlex="true" flexDirection="Column">
    <!-- Table设置flexGrow="1"，自动填充除Toolbar外的所有空间 -->
    <Table flexGrow="1" mode="SingleSelect">
      <!-- 这里放你的Table列和数据绑定逻辑 -->
    </Table>
    <!-- OverflowToolbar固定在View1底部，不会随Table滚动消失 -->
    <OverflowToolbar class="sapUiTinyMarginTop">
      <ToolbarSpacer/>
      <Button type="Accept" text="Save" press="onSave" enabled="{saveEnabled}"/>
      <Button text="Cancel" type="Reject"/>
    </OverflowToolbar>
  </VBox>
</mvc:View>

关键细节说明 #

1. sapUiFullHeight类：确保父Page和View1的VBox能占满浏览器或父容器的可用高度，避免布局收缩。
2. Flex布局属性：
   • displayFlex="true"：启用Flex布局。
   • flexDirection="Column"：让子元素垂直排列。
   • flexGrow="1"：让Table自动填充剩余空间，Toolbar自然固定在底部。
3. 避免Page嵌套：嵌套Page会导致布局上下文混乱，footer的显示逻辑会被父Page的滚动事件干扰，这就是你之前只有滚动到底部才看到Toolbar的原因。

这样调整后，OverflowToolbar会始终固定在View1区域的底部，View2完全不受影响，完美符合你的需求！

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