如何从Controller动态实现SAP UI5视图（多IconTabFilter）

1. 视图基础结构 #

先在XML视图中定义IconTabBar容器，用于承载动态生成的Tab项：

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="your.namespace.controller.YourController">
    <IconTabBar id="dynamicIconTabBar" stretchContentHeight="true">
        <!-- 动态生成的IconTabFilter将插入此处 -->
    </IconTabBar>
</mvc:View>

2. Controller核心实现逻辑 #

在Controller中通过JS动态创建IconTabFilter和对应的GridList，并绑定对应数据：

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/IconTabFilter",
    "sap/m/GridList",
    "sap/m/StandardListItem",
    "sap/ui/model/json/JSONModel"
], function(Controller, IconTabFilter, GridList, StandardListItem, JSONModel) {
    "use strict";

    return Controller.extend("your.namespace.controller.YourController", {
        onInit: function() {
            // 从视图Model获取数据（替换为实际接口返回数据）
            const tabDataSource = this.getView().getModel("tabData").getData();
            // 若需直接调用接口，可替换为异步请求：
            // const tabDataSource = await this._fetchTabData();

            const oIconTabBar = this.byId("dynamicIconTabBar");
            oIconTabBar.removeAllItems(); // 清空原有Tab项（可选）

            tabDataSource.forEach(tabInfo => {
                // 创建GridList并绑定当前Tab的列表数据
                const oGridList = new GridList({
                    items: {
                        path: "/listItems",
                        template: new StandardListItem({
                            title: "{title}",
                            description: "{description}",
                            icon: "{itemIcon}" // 可按需扩展字段
                        })
                    },
                    growing: true, // 数据量大时启用滚动加载
                    growingThreshold: 10
                });
                // 为当前GridList绑定独立子Model，避免数据冲突
                oGridList.setModel(new JSONModel(tabInfo));

                // 创建IconTabFilter并关联GridList
                const oTabFilter = new IconTabFilter({
                    key: tabInfo.tabKey,
                    text: tabInfo.tabName,
                    icon: tabInfo.tabIcon,
                    content: [oGridList]
                });

                oIconTabBar.addItem(oTabFilter);
            });

            // 默认选中第一个Tab（可选）
            if (tabDataSource.length > 0) {
                oIconTabBar.setSelectedKey(tabDataSource[0].tabKey);
            }
        },

        // 可选：模拟接口获取数据的方法
        _fetchTabData: async function() {
            const response = await fetch("/your/api/endpoint");
            return await response.json();
        }
    });
});

3. 数据结构要求 #

确保Model返回的数据包含每个Tab的基础信息和对应列表数据，示例结构如下：

[
    {
        "tabKey": "electronics",
        "tabName": "电子产品",
        "tabIcon": "sap-icon://electronics",
        "listItems": [
            {"title": "手机", "description": "智能手机", "itemIcon": "sap-icon://phone"},
            {"title": "平板", "description": "平板电脑", "itemIcon": "sap-icon://tablet"}
        ]
    },
    {
        "tabKey": "clothing",
        "tabName": "服饰",
        "tabIcon": "sap-icon://clothing",
        "listItems": [
            {"title": "T恤", "description": "棉质短袖", "itemIcon": "sap-icon://shirt"},
            // 此处可包含更多列表项（如20条）
        ]
    }
]

关键注意事项 #

• 数据隔离：每个GridList使用独立子Model，避免不同Tab的列表数据互相干扰；也可使用相对路径绑定（如path: "listItems", relative: true）配合主Model实现。
• 性能优化：单Tab列表数据量大时，启用GridList的growing属性实现分页加载，提升页面渲染性能。
• 自定义列表项：若需复杂布局的列表项，可将StandardListItem替换为自定义XML片段（通过sap.ui.xmlfragment加载）或自定义控件。

内容的提问来源于stack exchange，提问作者Lionel Samstag.