到达屏幕布局断点时使某些控件可见 - UI5

Question

我在 header 的 UI5 应用程序中有 2 个图像和 5 个按钮在这 2 个图像之间。在使用 Overflowtoolbar 时，溢出 (...) 显示在最右边，考虑到我将两个图像的溢出优先级调整为 "Never overflow" 并且它们永远不会溢出，我怎样才能让它出现在两者之间。另一种方法：是否可以在 header 中引入一个操作 sheet/ 面包屑菜单，并使其仅在到达某个屏幕断点时才可见，同时使所有其他按钮消失。在某种程度上-根据断点级别进行某些控制visible/hide。

目标是让两个图像都可见，直到它可能的点，并将所有内容放在...最好在这些图像之间。否则我看不到那些......，小屏幕只显示2张图片。

XML.view

    <OverflowToolbar design="Transparent">

    <Image src="images/abc.png" height="3.5rem">
            <layoutData>
            <OverflowToolbarLayoutData priority="High"/>
        </layoutData>
        </Image>
    <Button id="1">
        <layoutData>
            <OverflowToolbarLayoutData priority="Low"/>
        </layoutData>
    </Button>
    <Button id="2">
        <layoutData>
            <OverflowToolbarLayoutData priority="Low"/>
        </layoutData>
    </Button>
    <Button id="3">
        <layoutData>
            <OverflowToolbarLayoutData priority="Low"/>
        </layoutData>
    </Button>
    <Button id="4">
        <layoutData>
            <OverflowToolbarLayoutData priority="Low"/>
        </layoutData>
    </Button>
    <Button id="5">
        <layoutData>
            <OverflowToolbarLayoutData priority="Low"/>
        </layoutData>
    </Button>
    <ToolbarSpacer></ToolbarSpacer>
    <Image src="images/logo.png" height="2rem">
            <OverflowToolbarLayoutData priority="NeverOverflow"/>
        </layoutData>
    </Image>
    <ToolbarSeparator></ToolbarSeparator>
    <core:Icon id="loginInfo" src="sap-icon://customer" size="2rem"/>
</OverflowToolbar>

Answer 1

您将无法使用 OverflowToolbar 解决您的任务，因为 ... 始终呈现为最后一个元素（请参阅 Renderer: Line 23）。

您可以使用 Event API for screen width changes, modify a view model in the event handler and bind the visible property to that view model as described in Device Adaptation.

Answer 2

这里是 两张图片的示例，中间有一个操作 sheet/面包屑菜单：

<OverflowToolbar asyncMode="true">
  <Image src="..." />
  <Breadcrumbs currentLocationText="Laptop">
    <layoutData>
      <ToolbarLayoutData shrinkable="true" /><!-- if UI5 version < 1.103. -->
      <!-- Note: sap.m.Breadcrumbs is shrinkable by default since UI5 1.103. -->
    </layoutData>
    <links>
      <!-- ... -->
    </links>
  </Breadcrumbs>
  <Image src="..." />
</OverflowToolbar>

^{来自https://jsbin.com/humuxew/edit?js,output}

为了使工具栏中的面包屑可收缩，需要将 <ToolbarLayoutData shrinkable="true"/> 添加到 layoutData 聚合中。*

* 更新： 除非 SAPUI5/OpenUI5 版本 ≥ 1.103（参见 commit: 512d3dd）。

到达屏幕布局断点时使某些控件可见 - UI5

Make some controls visible when screen layout breakpoint is reached - UI5

sapui5