JS视图中的SAPUI5多个sap.m.TileContainer

JS视图中的SAPUI5多个sap.m.TileContainer,sapui5,Sapui5,我有一个使用JS视图用SAPUI5编写的单页应用程序。我想创建一个“仪表板”页面并在其上放置一些平铺。因此,我正在view.js-file的“createContent”函数中创建一个“sap.m.TileContainer” 我需要实现的是有两个独立的tilecontiner,因为我在顶部有重要的tile,在底部有不太重要的tile。但无论我做什么,例如,将两个TileContainer放入MatrixLayout、HorizontalLayout或作为“内容”放入sap.m.页面,它都不再显

我有一个使用JS视图用SAPUI5编写的单页应用程序。我想创建一个“仪表板”页面并在其上放置一些平铺。因此,我正在view.js-file的“createContent”函数中创建一个“sap.m.TileContainer”

我需要实现的是有两个独立的tilecontiner,因为我在顶部有重要的tile,在底部有不太重要的tile。但无论我做什么,例如,将两个TileContainer放入MatrixLayout、HorizontalLayout或作为“内容”放入sap.m.页面,它都不再显示。 当我直接返回这个实例而没有任何组件围绕它时,会显示一个TileContainer

有人能帮我吗? 以下代码可以正常工作:

    createContent : function(oController) {

    var tileContainer = new sap.m.TileContainer({
        tiles : [ 
            new sap.m.StandardTile({
            icon : "sap-icon://play",
            title : "Important Tile",
            press : function() {
                oController.nav.to("AfoStart");
            }
        }), new sap.m.StandardTile({
            icon : "sap-icon://pause",
            title : "ANOTHER Important Tile",
            press : function() {
                oController.nav.to("AfoStart");
            }
        }), new sap.m.StandardTile({
            icon : "sap-icon://timesheet",
            title : "Third important tile",
            press : function() {
                oController.nav.to("AfoStart");
            }
        }), new sap.m.StandardTile({
            icon : "sap-icon://number-sign",
            title : "UNIMPORTANT ONE",
            press : function() {
                oController.nav.to("AfoStart");
            }
        }), new sap.m.StandardTile({
            icon : "sap-icon://locate-me",
            title : "UNIMPORTANT TWO",
            press : function() {
                oController.nav.to("AfoStart");
            }
        })

         ],

    });

    return tileContainer;
}
此代码不起作用:

    createContent : function(oController) {

    var tileContainerTop = new sap.m.TileContainer({
        tiles : [ 
            new sap.m.StandardTile({
            icon : "sap-icon://play",
            title : "Important Tile",
            press : function() {
                oController.nav.to("AfoStart");
            }
        }), new sap.m.StandardTile({
            icon : "sap-icon://pause",
            title : "Another important Tile",
            press : function() {
                oController.nav.to("AfoStart");
            }
        }), new sap.m.StandardTile({
            icon : "sap-icon://timesheet",
            title : "Third important tile",
            press : function() {
                oController.nav.to("AfoStart");
            }
        }),

         ],

    });

    var tileContainerBottom = new sap.m.TileContainer({
        tiles : [ 
            new sap.m.StandardTile({
            icon : "sap-icon://play",
            title : "UNIMPORTANT ONE",
            press : function() {
                oController.nav.to("AfoStart");
            }
        }), new sap.m.StandardTile({
            icon : "sap-icon://pause",
            title : "UNIMPORTANT TWO",
            press : function() {
                oController.nav.to("AfoStart");
            }
        })
         ],

    });     

    var page = new sap.m.Page("myPage", {

        title: "Dashboard",
        content: [tileContainerTop, tileContainerBottom]

    });

    // OR create MatrixLayout here...doenst work
    // OR create HorizontalLayout here...doesnt work

    return page;
}

您需要将页面的enableScrolling设置为false。 因为这样页面将占据100%的位置。如果你不这样做,网页将试图与其内容一样大

默认情况下,平铺容器与其父容器一样大,因此页面和容器的高度均为0

在这里,我将两个瓷砖容器放置在彼此下方,以便它们占据屏幕的一半:


致以最诚挚的问候

您必须将页面的启用滚动设置为false,并同时调整TileContainer的高度。将两个容器的高度设置为50-50%,两个平铺都将显示在您的页面上。仅将enableScrolling设置为false将不起作用

嗨,托比亚索泽尔。令人惊叹的。太好了,非常感谢。这回答了我的问题。(很抱歉回复太晚。我没有收到关于你帖子的任何通知)