关于前端:SAP-UI5-里-FlexBox-控件使用的一个例子

1次阅读

共计 1765 个字符，预计需要花费 5 分钟才能阅读完成。

SAP UI5 中的 sap.ui.layout.VerticalLayout 是一个布局控件，用于垂直排列其余控件。它容许您将控件搁置在独自的行中，以便在纵向方向上排列它们。以下是应用 sap.ui.layout.VerticalLayout 控件的阐明：

创立 sap.ui.layout.VerticalLayout 控件
您能够应用以下代码行创立一个 sap.ui.layout.VerticalLayout 控件：

var oLayout = new sap.ui.layout.VerticalLayout();

向 sap.ui.layout.VerticalLayout 控件中增加控件
您能够应用以下代码将控件增加到 sap.ui.layout.VerticalLayout 控件中：

oLayout.addContent(oControl);

其中 oControl 是要增加到布局中的控件对象。

设置 sap.ui.layout.VerticalLayout 控件属性

以下是一些能够设置的 sap.ui.layout.VerticalLayout 控件属性：

width: 控件的宽度。例如：oLayout.setWidth(“100%”);
visible: 控件是否可见。例如：oLayout.setVisible(true);
enabled: 控件是否启用。例如：oLayout.setEnabled(true);
content: 控件蕴含的内容。例如：oLayout.setContent(oControl);
allowWrapping: 指定是否容许控件折行。例如：

oLayout.setAllowWrapping(false);

将 sap.ui.layout.VerticalLayout 控件增加到 UI5 页面

将 sap.ui.layout.VerticalLayout 控件增加到页面的办法因您应用的办法而异。如果您应用 XML 视图，则能够在视图文件中增加以下代码行：

<vc:VerticalLayout id="myLayout" width="100%" allowWrapping="false" />

其中，vc 是指定 sap.ui.layout 命名空间的 XML 命名空间前缀。

如果您应用 JavaScript 视图，则能够应用以下代码将布局增加到视图：

var oLayout = new sap.ui.layout.VerticalLayout({id: "myLayout", width: "100%", allowWrapping: false});
this.getView().addContent(oLayout);

看一个例子：

如果把 direction 属性改成 column：

界面更改为如下：

direction 属性的类型：sap.m.FlexDirection

column 代表从上到下垂直方向布局：

Flexbox 蕴含两个 text 控件：

这两个都在 items 的 aggregation 里：

items 的聚合类型是 sap.ui.core.Control

在 SAP UI5 中，aggregation（聚合）是一种控件属性，用于指定控件中蕴含的其余控件的汇合。控件能够有一个或多个聚合，这些聚合是按名称定义的，并在控件的元数据中进行了申明。

例如，sap.m.List 控件有一个 items 聚合，用于指定列表项的汇合。在应用 sap.m.List 控件时，您能够通过增加列表项来填充此聚合。

以下是 sap.ui.core.Element 类的一部分定义，其中定义了聚合的语法：

metadata : {
    aggregations : {"aggregationName1" : {type : "sap.ui.core.Control", multiple : true, singularName : "aggregationName1"},
        "aggregationName2" : {type : "sap.ui.core.Control", multiple : false, singularName : "aggregationName2"}
    }
}

在这里，aggregations 属性定义了控件的聚合列表。每个聚合都用一个名称和一组属性来定义。在此示例中，aggregationName1 聚合是一个具备多个控件的汇合，而 aggregationName2 聚合则只蕴含一个控件。

正文完