两个相邻的 tileContainer

Question

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

我看到这个 post (SAPUI5 multiple sap.m.TileContainer in JS view)，他们将两个瓷砖容器一个放在另一个上面，我已经有了，但我需要将这个新的添加到顶行。我基本上想要在屏幕的同一行上包含来自 'master' 和 'new' 的图块的一行。

这是我的，但它是三行而不是两行：

  <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>

这是添加 HorizontalLayout 后的编辑。现在我只得到 HorizontalLayout 之后的图块。好像没有考虑 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

正如评论中所讨论的那样，您可以使用 HorizontalLayout，但是在实现它时您会很快发现，这会严重影响应用程序的响应能力。但是，响应式版本可以基于使用 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 供您测试。

两个相邻的 tileContainer

Two tileContainers next to each other

xml

sapui5