时间戳

首页 > 解决方案 > sap.m.GenericTile 的容器

sapui5 - sap.m.GenericTile 的容器

问题描述

对于 sap.m.StandardTile，我们有出色的 sap.m.TileContainer，但我无法为 sap.m.GenericTile 找到类似的东西。

基本上我正在寻找一个包含多个通用瓷砖的控件，并将根据设备自动调整大小和居中。

现在，这就是我正在做的事情：

<GenericTile header="{/0/header}" subheader="{/0/subheader}" press="onTilePress">
<TileContent>
<ImageContent src="{/0/src}"/>
</TileContent>
</GenericTile>

<GenericTile header="{/1/header}" subheader="{/1/subheader}" press="onTilePress">
<TileContent>
<ImageContent src="{/1/src}"/>
 </TileContent>
</GenericTile>

除了必须手动调用我的 JSON 文件中的每个条目之外，没有自动的方法吗？

请帮忙。

标签： sapui5

解决方案

您可以使用 aFlexbox来聚合和绑定项目，而不是单独/手动绑定它们并grid layout控制设备的视图。GridLayout中的defaultSpan控件属性根据设备屏幕尺寸（即 XL、L、M 和 S 屏幕显示）确定图块的外观。

查看工作示例

//Example data.json

{
  "ProductCollection": [{
    "productHeader": "Tile Header - 1",
    "productSubHeader": "Tile SubHeader - 1",
    "ProductPicUrl": "sap-icon://competitor"
  }, {
    "productHeader": "Tile Header - 2",
    "productSubHeader": "Tile SubHeader - 2",
    "ProductPicUrl": "sap-icon://badge"
  }, {
    "productHeader": "Tile Header - 3",
    "productSubHeader": "Tile SubHeader - 3",
    "ProductPicUrl": "sap-icon://broken-link"
  }, {
    "productHeader": "Tile Header - 4",
    "productSubHeader": "Tile SubHeader - 4",
    "ProductPicUrl": "sap-icon://create"
  }, {
    "productHeader": "Tile Header - 5",
    "productSubHeader": "Tile SubHeader - 5",
    "ProductPicUrl": "sap-icon://pending"
  }, {
    "productHeader": "Tile Header - 6",
    "productSubHeader": "Tile SubHeader - 6",
    "ProductPicUrl": "sap-icon://decision"
  }, {
    "productHeader": "Tile Header - 7",
    "productSubHeader": "Tile SubHeader - 7",
    "ProductPicUrl": "sap-icon://process"
  }, {
    "productHeader": "Tile Header - 8",
    "productSubHeader": "Tile SubHeader - 8",
    "ProductPicUrl": "sap-icon://accept"
  }, {
    "productHeader": "Tile Header - 9",
    "productSubHeader": "Tile SubHeader - 9",
    "ProductPicUrl": "sap-icon://alert"
  }]
}
<!--In **Main.view.xml** -->

<Page id="page" title="Page Title" showHeader="true" enableScrolling="true">
  <content>
    <Panel height="100%" width="100%" backgroundDesign="Transparent">
      <layout:Grid containerQuery="true" defaultSpan="XL12 L12 M12 S12" width="100%">
        <layout:VerticalLayout width="100%" class="gridWrapper">
          <FlexBox alignItems="Center" alignContent="Center" direction="Row" renderType="Bare" wrap="Wrap" width="100%" displayInline="true" fitContainer="true" items="{/ProductCollection}">
            <items>
              <GenericTile header="Headers" subheader="Subheader" press="onTilePress">
                <TileContent>
                  <ImageContent src="{ProductPicUrl}" />
                </TileContent>
              </GenericTile>
            </items>
          </FlexBox>
        </layout:VerticalLayout>
      </layout:Grid>
    </Panel>
  </content>
</Page>

推荐阅读