如何实现带图标及子章节的SAPUI5 AnchorBar（基于指定示例）

核心思路 #

放弃customAnchorBarButton聚合（该方式确实不支持子章节层级），改用自定义AnchorBar的Item模板，通过绑定ObjectPageSection的自定义数据或直接指定图标，实现带图标的标签，同时保留原生的子章节导航功能。

具体实现步骤 #

1. 定义AnchorBar的自定义Item模板 #

在ObjectPageLayout的anchorBar配置中，通过itemTemplate指定自定义控件结构，同时显示图标和文本：

<ObjectPageLayout id="ObjectPageLayout" anchorBarMode="Inline">
    <anchorBar>
        <itemTemplate>
            <ToolbarButton icon="{customData>icon}" text="{title}" press="onAnchorBarItemPress">
                <layoutData>
                    <OverflowToolbarLayoutData priority="NeverOverflow" />
                </layoutData>
            </ToolbarButton>
        </itemTemplate>
    </anchorBar>
    <!-- 后续Sections和SubSections保持原示例结构 -->
</ObjectPageLayout>

2. 给每个ObjectPageSection添加图标数据 #

在每个ObjectPageSection中，通过customData设置图标路径：

<ObjectPageSection title="General Information">
    <customData>
        <core:CustomData key="icon" value="sap-icon://customer" />
    </customData>
    <!-- SubSections内容 -->
</ObjectPageSection>
<ObjectPageSection title="Contact Details">
    <customData>
        <core:CustomData key="icon" value="sap-icon://phone" />
    </customData>
    <!-- SubSections内容 -->
</ObjectPageSection>

3. 实现锚点导航点击逻辑 #

在控制器中添加onAnchorBarItemPress方法，确保点击带图标按钮能跳转到对应Section：

onAnchorBarItemPress: function(oEvent) {
    var oButton = oEvent.getSource();
    var oContext = oButton.getBindingContext();
    var oSection = this.getView().byId(oContext.getProperty("id"));
    this.getView().byId("ObjectPageLayout").scrollToSection(oSection.getId());
}

4. 调整样式保持子章节缩进 #

添加CSS样式，确保子章节的图标和文本保留原生缩进效果：

.sapUxAPAnchorBar .sapMTB.sapMTBInverted .sapMTBContent .sapMBtn {
    margin-left: 0;
}
.sapUxAPAnchorBar .sapUxAPAnchorBarSubSection .sapMBtn {
    padding-left: 1.5rem;
}

关键说明 #

• 完全保留原示例的子章节层级结构和导航逻辑，仅扩展图标显示功能
• 图标支持SAPUI5内置图标（sap-icon://xxx）或自定义图标路径
• 若使用OData绑定，可直接将icon字段绑定到后端数据，无需手动设置customData

内容的提问来源于stack exchange，提问作者BlueHeart