Question

我想知道是否可以将两个TileContainers放在一起（并排）？我有一个我想要基于一个数据源构建的，另一个来自另一个源。根据我的数据，我知道第一个将有4个瓷砖，第二个将有1个瓷砖。

我看到这篇文章（SAPUI5 multiple sap.m.TileContainer in JS view），他们将两个瓷砖容器一个放在另一个上面，我已经有了，但我需要将这个新的一个添加到顶行。我基本上希望在屏幕的同一行上使用“master”和“new”中的tile这一行。

这是我所拥有的，但它是制作三行而不是两行：

  <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进行测试。

两个tileContainers彼此相邻

1 个答案: