我想知道是否可以将两个TileContainer并排放置吗？我有一个要基于一个数据源而另一个要从另一个源构建的数据。根据我的数据，我知道第一个将具有4个图块，第二个将具有1个图块。
我看到了这篇文章（在JS视图中为SAPUI5 multiple sap.m.TileContainer），他们在其中放置了两个平铺容器，另一个已经在上面，但是我需要将此新容器添加到第一行。我基本上希望在屏幕的同一行上包含来自“主”和“新”的图块的一行。
这是我所拥有的，但是它是三行而不是两行：
<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后，这是一个EDIT。现在，我只在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>
正如注释中所讨论的，您可以使用HorizontalLayout，但是在实现此功能时，您会很快发现，这严重影响了应用程序的响应能力。但是，响应版本可以基于使用网格布局。您只需为中小型设备分配跨度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示例供您测试。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句