SAPUI5 GridList组件分组问题

Question

我想对GridList组件使用分组功能。但是当我习惯对功能进行分组时，列表项无法显示单独的行。所有项目均以内联位置显示。我正在使用相同的编码，就像this url

这是我的视图https://ibb.co/M90Pb5T的屏幕显示>

这是我的编码：

<mvc:View xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:grid="sap.ui.layout.cssgrid"
xmlns:f="sap.f" controllerName="SapUI5Tutorial.RootApp">
<Panel>
    <content>
        <f:GridList items="{
                    path: '/DataList',
                    sorter: {
                        path: 'groupTitle',
                        group: true
                    }
                }">
            <f:customLayout>
                <grid:GridBoxLayout boxWidth="15rem"/>
            </f:customLayout>
            <f:GridListItem>
                <VBox >
                    <VBox class="sapUiSmallMargin">
                        <layoutData>
                            <FlexItemData growFactor="1" shrinkFactor="0" />
                        </layoutData>
                        <Title text="{title}" wrapping="true" />
                        <Label text="{subtitle}" wrapping="true" />
                    </VBox>
                </VBox>
            </f:GridListItem>
        </f:GridList>
    </content>
</Panel>

这是controller.js（Init函数）

var data = [
    { title: "Grid item title 1", subtitle: "Subtitle 1", groupTitle: "Group A" },
    { title: "Grid item title 2", subtitle: "Subtitle 2", groupTitle: "Group A" },
    { title: "Grid item title 3", subtitle: "Subtitle 3", groupTitle: "Group A" },
    { title: "Grid item title 10", subtitle: "Subtitle 10", groupTitle: "Group B" },
    { title: "Grid item title 11", subtitle: "Subtitle 11", groupTitle: "Group B" },
    { title: "Grid item title 12", subtitle: "Subtitle 12", groupTitle: "Group B" },
  ];
  oModel.setProperty("/DataList", data);
我在哪里做错了？

请让我知道这个问题。我想为GroupHeaderListItem看到单独的行。

我想对GridList组件使用分组功能。但是当我习惯对功能进行分组时，列表项无法显示单独的行。所有项目均以内联位置显示。我正在使用...

Answer 1

我已经在网络上进行了一些研究，并且通过向sap.f文件中添加index.html库解决了该问题。