如何设置sap.m.MessagePopover的宽度？

Question

控件sap.m.MessagePopover有一个属性_oPopover（里面包含sap.m.Popover）。使用此属性，我可以设置弹出窗口宽度：

messagePopover._oPopover.setContentWidth("450px");

但是，由于不应该使用从_开始的SAP属性，是否有人知道更清洁的方式？

Answer 1

另一种解决方案是使用CSS类。然而，有一个问题。从下面生成的消息popover生成的DOM中可以看到，使用了内联样式:(。

覆盖内联样式的唯一方法是在CSS中使用！important，这也是不推荐的方法。但是，考虑到使用内联CSS，我会使用！important关键字。以下是工作代码：

XML代码（用于添加类）：

<MessagePopover id='myMP' class='myPopoverClass'>
    <items>
        <MessagePopoverItem title='Title' subTitle='SubTitle'></MessagePopoverItem>
    </items>
</MessagePopover>

CSS：

        .myPopoverClass {
            width:100rem;
        }
        .myPopoverClass .sapMPopoverCont {
            width:100% !important;
        }

您可以使用消息Popover所需的宽度。

编辑：这是源代码：

MessagePopover.prototype.init = function () {
            var that = this;
            var oPopupControl;

            this._oResourceBundle = sap.ui.getCore().getLibraryResourceBundle("sap.m");

            this._oPopover = new ResponsivePopover(this.getId() + "-messagePopover", {
                showHeader: false,
                contentWidth: "440px",
                placement: this.getPlacement(),
                showCloseButton: false,
                modal: false,
                afterOpen: function (oEvent) {
                    that.fireAfterOpen({openBy: oEvent.getParameter("openBy")});
                },
                afterClose: function (oEvent) {
                    that._navContainer.backToTop();
                    that.fireAfterClose({openBy: oEvent.getParameter("openBy")});
                },
                beforeOpen: function (oEvent) {
                    that.fireBeforeOpen({openBy: oEvent.getParameter("openBy")});
                },
                beforeClose: function (oEvent) {
                    that.fireBeforeClose({openBy: oEvent.getParameter("openBy")});
                }
            }).addStyleClass(CSS_CLASS);

Answer 2

从UI5版本1.46开始，可以使用更灵活的控件sap.m.MessageView代替旧的sap.m.MessagePopover。

• 没有必要访问内部属性或应用自定义CSS样式类来操纵宽度you can put MessageView anywhere you want（仍然，Fiori指南recommends只使用它within a responsive popover或对话框）。

  const popover = new ResponsivePopover({
    contentWidth: "450px",
    contentHeight: "450px",
    content: [
      /*myMessageView*/
    ],
  });
  // ...
  popover.openBy(...);

• 与MessagePopover相比，MessageView可以对项目进行分组等。
• 在内部，MessagePopover uses MessageView也是。