SAPUI5:创建以图标为中心的GenericTile

Question

我想创建一个瓦片，这是从sap.suite.ui.commons.GenericTile继承，只显示一个图标(在瓦片的中心)。由于居中，我不能使用标准的聚合或属性，因为它们将图标放置在特定的位置(在左下侧)。

我尝试过以下几种方法，但没有成功：

$.sap.declare("myAddTile");

sap.suite.ui.commons.GenericTile.extend("myAddTile", {

init: function() {
    // do something for initialization...
    sap.suite.ui.commons.GenericTile.prototype.init.call(this);
},
renderer: function(oRm, oControl) {
    var oPlusIcon = new sap.ui.core.Icon({
        src: 'sap-icon://sys-add'
    }).placeAt(oControl);
    sap.suite.ui.commons.GenericTileRenderer.render(oRm, oControl);
}
});

得到的图块是空的.

Answer 1

我尝试了一下渲染器，想出了这个解决方案：

    rm.write("<div");
    rm.addClass("myAddTileIcon");
    rm.addClass(oControl.getSize());
    rm.writeClasses();
    rm.writeAttribute("id", oControl.getId() + "-icon");
    rm.write(">");
    rm.renderControl(new sap.ui.core.Icon({
        src: 'sap-icon://sys-add',
        size: "5rem"
    }));
    rm.write("</div>");

当然，图标的正确对齐也需要注意：

.myAddTileIcon .sapUiIcon {
  font-family: SAP-icons;
  font-size: 5rem;
  line-height: inherit;
  cursor: default;
  text-align: center;
  display: block;
  padding-top: 20%;
  vertical-align: middle;
  color: grey;
}

如果有人对如何以一种更优雅的方式解决这个问题有意见，请发帖。

干杯