Question

我正在使用SAP的Open UI5，并希望将BorderLayout用作页面内容。有人有例子吗？

var page = new sap.m.Page('page', {
    content: [
        // here BorderLayout with sap.m.List as Center and sap.m.HBox as Bottom
    ]
});
return page;

Answer 1

你真正想要的可能是一个内容由两个区域组成的页面：一个在底部有一个已知/固定大小，另一个在剩余空间之上，对吧？

BorderLayout可能是一个解决方案，但我发现这种方法存在两个问题： - BorderLayout位于sap.ui.commons库中，它是a）不应该与sap.m一起使用，b）不适合在触摸设备上使用，b）非常重，因为它包含许多控件，也可在sap.m. - BorderLayout是一个非常古老的控件，我相信它比新的替代品更少（不是说它有缺陷，但它可能不是技术上最先进的）。

所以我建议使用更新的sap.ui.layout.FixFlex控件，它是为您的（假设的）用例创建的。看这个例子： http://jsbin.com/zaveloxata/1/edit?html,output

底部的固定区域可以具有给定的绝对大小（在示例中为100px）或由其内容定义的高度（只需删除fixContentSize设置，它将与Button内部一样高）。

Answer 2

好的，我明白了：）

data-sap-ui-libs="sap.m,sap.ui.core,sap.ui.commons"

var page = new sap.m.Page('page', {
    content: [
        new sap.ui.commons.layout.BorderLayout({
            center: new sap.ui.commons.layout.BorderLayoutArea({
                content: [
                    new sap.m.List(this.createId('list'), {
                        items: []
                    })
                ]
            }),
            bottom: new sap.ui.commons.layout.BorderLayoutArea({
                content: [
                    new sap.m.HBox({
                        items:[
                            new sap.m.Label({
                                text: 'Bottom Area', 
                                textAlign: sap.ui.core.TextAlign.Center,
                                design: sap.m.LabelDesign.Bold 
                            })
                        ],
                        justifyContent : sap.m.FlexJustifyContent.Center,
                        alignItems: sap.m.FlexAlignItems.Center
                    })
                ]
            })
        })
    ]
});
return page;

如何在sap.m.Page中使用BorderLayout？

2 个答案: