sap.m.GenericTile的容器

时间:2019-01-08 05:41:58

标签: sapui5

对于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文件中的每个条目之外,是否有自动化的方法?

请帮助。

1 个答案:

答案 0 :(得分:1)

您可以使用Flexbox来聚合和绑定项目,而不是单独/手动绑定它们,而可以使用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>