xml - 两个相邻的tileContainer

Question

我想知道是否可以将两个 TileContainer 并排放置？我想要一个基于一个数据源构建，另一个基于另一个数据源构建。根据我的数据，我知道第一个将有 4 个图 block ，第二个将有 1 个图 block 。

我看到这篇文章( SAPUI5 multiple sap.m.TileContainer in JS view )，他们将两个平铺容器一个放在另一个之上，我已经有了，但我需要将这个新的添加到顶行。我基本上希望将“master”和“new”的图 block 放在屏幕的同一行上。

这是我所拥有的，但它是三行而不是两行:

  <TileContainer tiles="{/master}" height="25%" width="75%">
    <tiles>
      <StandardTile
        icon="sap-icon://dimension"
        type="Monitor"
        number="{count}"
        title="{cnt_type}"
        press="goToMasterPage"
        app:columnName="{cnt_type}"
        ></StandardTile>
    </tiles>
    </TileContainer>
  <TileContainer tiles="{/new}" height="25%" width="25%">
    <tiles>
      <StandardTile
        icon="sap-icon://inspection"
        type="Monitor"
        number="{newcount}"
        title="{type}"
        press="goToNewPage"
        app:columnName="{cnt_type}"
        ></StandardTile>
    </tiles>
  </TileContainer>
  <TileContainer height="25%" width="100%">
    <tiles>
        <StandardTile
            icon="sap-icon://upload"
            type="Monitor"
            title="Upload Download Information"
            press="goToUpload">
        </StandardTile>
        <StandardTile
            icon="sap-icon://download"
            type="Monitor"
            title="Create Download File"
            press="goToDownload">
        </StandardTile>
    </tiles>
  </TileContainer>

这是添加 Horizo​​ntalLayout 后的编辑。现在我只能在 Horizo​​ntalLayout 之后获得图 block 。好像没有考虑 50% 的高度。有什么想法吗？

<Page title="Customer Outreach" enableScrolling="false">
    <l:HorizontalLayout height="50%">
                    <TileContainer tiles="{/master}" height="50%"  >
                        <tiles>
                          <StandardTile
                            icon="sap-icon://dimension"
                            type="Monitor"
                            number="{count}"
                            title="{cnt_type}"
                            press="goToMasterPage"
                            app:columnName="{cnt_type}"
                            ></StandardTile>
                        </tiles>
                    </TileContainer>

                    <TileContainer tiles="{/new}"  >
                    <tiles>
                      <StandardTile
                        icon="sap-icon://inspection"
                        type="Monitor"
                        number="{newcount}"
                        title="{type}"
                        press="goToNewPage"
                        app:columnName="{cnt_type}"
                        ></StandardTile>
                    </tiles>
                  </TileContainer>
    </l:HorizontalLayout>
                    <TileContainer height="50%" >
                        <tiles>
                            <StandardTile
                                icon="sap-icon://upload"
                                type="Monitor"
                                title="Upload Download Information"
                                press="goToUpload">
                            </StandardTile>
                            <StandardTile
                                icon="sap-icon://download"
                                type="Monitor"
                                title="Create Download File"
                                press="goToDownload">
                            </StandardTile>
                        </tiles>
                    </TileContainer>
</Page>

Answer 1

正如评论中所讨论的，您可以使用 Horizo​​ntalLayout，但是在实现它时您很快就会发现，这会严重影响应用程序的响应能力。但是，响应式版本可以基于使用 Grid布局。您只需为中小型设备分配 12 的跨度即可。仅在大屏幕上，您可以通过并排显示两个容器来使用全宽度:

var container1 = new sap.m.TileContainer({
  width : "100%",
  height: "350px",
  tiles : [new sap.m.StandardTile({
        icon : "sap-icon://play",
    title : "1st Important Tile"
  }),new sap.m.StandardTile({
        icon : "sap-icon://play",
    title : "2nd Important Tile"
  })]
}),container2 = new sap.m.TileContainer({
  width : "100%",
  height: "350px",
  tiles : [new sap.m.StandardTile({
        icon : "sap-icon://play",
    title : "1st Important Tile"
  }),new sap.m.StandardTile({
        icon : "sap-icon://play",
    title : "2nd Important Tile"
  })]
});

var gridContainer = new sap.ui.layout.Grid({
  defaultSpan : "L6 M12 S12",
  width : "100%",
  content : [container1, container2]
});

我创建了一个 JSBin Example供您测试。