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

How to user BorderLayout inside sap.m.Page?

本文关键字：BorderLayout Page sap      更新时间：2023-09-26

我正在使用SAP的OpenUI5，并希望使用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;

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

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

因此，我建议使用更新得多的sap.ui.layout.FixFlex控件，它是为您（假设的）用例创建的。请参见此示例：http://jsbin.com/zaveloxata/1/edit?html，输出

底部的固定区域可以具有给定的绝对大小（本例中为100px），也可以具有由其内容定义的高度（只需删除fixContentSize设置，它就会和里面的按钮一样高）。

好的，我明白了：）

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;
相关文章：