sap.m.GenericTile 的容器

Question

对于 sap.m.StandardTile，我们有出色的 sap.m.TileContainer，但我找不到任何与 sap.m.GenericTile 相似的东西。

基本上我正在寻找一个包含多个 Generic Tiles 并会根据设备自动调整大小和居中的控件。

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

<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 文件中的每个条目之外，是否有自动执行此操作的方法？

请帮忙。

Answer 1

您可以使用 Flexbox 来聚合和绑定项目，而不是 individually/manually 绑定它们，并使用 grid layout 来控制设备的视图。 GridLayout 中的 defaultSpan 控件属性确定图块的外观，具体取决于设备屏幕尺寸，即 XL、L、M 和 S 屏幕显示。

See working example

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

sap.m.GenericTile 的容器

Container for sap.m.GenericTile

sapui5