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，必須與嵌入佈局相匹配。

![](https://img-blog.csdnimg.cn/img_convert/e8b20d2468f2287e0bd937cb98c2e62a.png)

刪除這段程式碼之後，應用的佈局就被破壞了：

![](https://img-blog.csdnimg.cn/img_convert/7f782d45b6bee72f72373f5fc7bdfbd7.png)

![](https://img-blog.csdnimg.cn/img_convert/e2b595fb1ea4b1daa96fabde5d562f1f.png)

兩個按鈕所在的區域和 3D Viewer 顯示的區域混淆在一起了：
![](https://img-blog.csdnimg.cn/img_convert/321a216a71a8675c2e997cec5a0d041f.png)

growFactor：確定剩餘可分配空間時彈性專案(flex item)的靈活性(flexibility)。

一些影響佈局的屬性需要在 FlexBox 控制元件中設定。其他屬性可以附加到透過 `layoutData` 聚合放置在 FlexBox 內的控制元件。例如，佈局方向在 FlexBox 中設定如下：

```javascript
var oMyFlexbox = new sap.m.FlexBox({
  items: [
    new sap.m.Button({text: "Button 1"}),
    new sap.m.Button({text: "Button 2"})
  ],
  direction: "Column"
});
```
最後的效果：
![](https://img-blog.csdnimg.cn/img_convert/d4babea6a43bcc68e06bc5797af24cb2.png)

我們也可以透過 order 屬性顯式指定按鈕的順序：

```javascript
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 之後：

![](https://img-blog.csdnimg.cn/img_convert/8a24eea7da73af0dff067f23aa569a43.png)

FlexBox 控制元件是 CSS 中 `flexible box layout` 的包裝器。控制元件呈現器(control renderer)在適當的 HTML 元素上設定 CSS 屬性（包括必要時的字首版本）。 實際的佈局是由瀏覽器完成的。

FlexBox 佈局具有子元素的佈局方向。 預設方向是行，行在閱讀方向上水平排列。 這定義了主軸。 這種情況下的橫軸是垂直的。

開發人員可以將佈局方向屬性更改為 Column，這將導致垂直主軸和水平交叉軸。

SAP UI5 應用裡 FlexBox 控制元件的設計原理

相關文章