SAPUI5 sap.m.List：分隔符答案

【问题标题】：SAPUI5 sap.m.List: DividerSAPUI5 sap.m.List：分隔符
【发布时间】：2014-08-16 11:24:36
【问题描述】：

我有一个显示各种操作的移动应用菜单。这些动作可以分组，我想用分隔线分隔这些组。不幸的是，没有这样的分隔线。你会如何解决这个问题？通过CSS？或者通过创建自定义列表项？这会是什么样子？

欢迎任何好的想法。

【问题讨论】：

标签： list menu grouping sapui5 divider

【解决方案1】：

由于它是一个移动应用程序，我假设您使用的是 sap.m 库中的 List 控件。

您可以使用列表控件的分组功能在您的项目中自定义组“副标题”。它们看起来像分隔线。您不需要创建任何自定义 CSS。

要了解它的外观和操作方法，请查看 UI5 探索应用程序中的 List - Grouping sample。

有关列表中自定义排序和分组的更多信息，您可能会发现我的这篇文章也很有用：“Custom Sorting and Grouping”。

【讨论】：

@qmarco：你有那个自定义排序和分组帖子的链接吗？
@qmarco：是的，一个链接会很棒，因为我希望在那里获得更多的例子。我正在手动构建列表，我不想先创建嵌套模型才能设置启用分组的排序器....
@qmarco，不错，请看链接scn.sap.com/community/developer-center/front-end/blog/2013/11/…
我已经添加了答案的链接，对此很抱歉，我不知道我第一次添加它时发生了什么。顺便说一句 - 这是 qmacro，而不是 qmarco :)
@qmacro：所以没有办法将它们作为项目插入？我需要解决方法并使用模型？ :-(

【解决方案2】：

好的，根据 qmarco 的建议，我创建了一个从 sap.m.StandardListItem 派生的自定义控件，并为组标题列表项分配了与 SAPUI5 相同的样式类 - 等等：

sap.m.StandardListItem.extend("controls.CustomListDivider", {

init: function() {
    sap.m.StandardListItem.prototype.init.call(this);
    this.setType(sap.m.ListType.Inactive);
},

renderer: function(oRm, oControl) {
    oRm.addClass("myListDivider");

    // add style classes from Group Header List Item
    oRm.addClass("sapMGHLI");
    oRm.addClass("sapMGHLIUpperCase");
    oRm.addClass("sapMLIB");
    oRm.addClass("sapMLIB-CTX");
    oRm.addClass("sapMLIBShowSeparator");
    oRm.addClass("sapMLIBTypeInactive");

    sap.m.StandardListItemRenderer.render(oRm, oControl);
}

现在您可以手动将其添加到您的列表中，而无需使用模型或分类器等。

【讨论】：