关于前端:SAP-UI5-应用里-FlexBox-控件的设计原理

35次阅读

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

sap.m.FlexBox 控件为 flexible box layout 构建容器。VBox 控件为垂直的框布局 (vertical flexible box layout) 构建容器。VBox 是一种应用的控件，因为它只是一个定制化的 FlexBox 控件。

VBox 蕴含 items 聚合，从 FlexBox 继承而来。

HBox 控件为程度框布局 (horizontal flexible box layout) 构建容器。

HBox 有一个名叫 LayoutData 的聚合，用来定义此控件在布局内应用时的布局束缚(layout constraints).

LayoutData 类是 typed classes，必须与嵌入布局相匹配。

删除这段代码之后，利用的布局就被毁坏了：

两个按钮所在的区域和 3D Viewer 显示的区域混同在一起了：

growFactor：确定残余可调配空间时弹性我的项目 (flex item) 的灵活性(flexibility)。

一些影响布局的属性须要在 FlexBox 控件中设置。其余属性能够附加到通过 layoutData 聚合搁置在 FlexBox 内的控件。例如，布局方向在 FlexBox 中设置如下：

var oMyFlexbox = new sap.m.FlexBox({
  items: [new sap.m.Button({text: "Button 1"}),
    new sap.m.Button({text: "Button 2"})
  ],
  direction: "Column"
});

最初的成果：

咱们也能够通过 order 属性显式指定按钮的程序：

var oMyFlexbox = new sap.m.FlexBox({
  items: [
    new sap.m.Button({
      text: "Button 1",
      layoutData: new FlexItemData({order: 2})
    }),
    new sap.m.Button({text: "Button 2"})
  ]
});

下面的代码，尽管 Button 1 先呈现，但其通过 layoutData 设置的 order 属性值为 2，因而呈现在 Button 2 之后：

FlexBox 控件是 CSS 中 flexible box layout 的包装器。控件出现器 (control renderer) 在适当的 HTML 元素上设置 CSS 属性（包含必要时的前缀版本）。理论的布局是由浏览器实现的。

FlexBox 布局具备子元素的布局方向。默认方向是行，行在浏览方向上程度排列。这定义了主轴。这种状况下的横轴是垂直的。

开发人员能够将布局方向属性更改为 Column，这将导致垂直主轴和程度穿插轴。

正文完