這個控制元件的名稱空間：sap.ui.layout.Grid

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

一個佈局控制元件，將其子控制元件放置在 12 列流佈局中。

根據可用的螢幕大小，可以指定 Grid 控制元件的子控制元件採用可變數量的列。 藉助此控制元件，可以實現超大、大、中、小尺寸螢幕的靈活佈局和換行，例如大型桌上型電腦、桌上型電腦、平板電腦和移動裝置。

Grid 控制元件的寬度可以基於百分比或畫素，並且其列之間的間距可以設定為各種預定義值。

注意：

- 子控制元件的可見性不影響它所佔據的水平空間，這意味著即使控制元件不可見，它的水平空間仍然存在，即使它是空的。
- 如果它變寬，則列的內容被設計為溢位其尺寸之外。 應向控制元件新增一個額外的 sapUiRespGridOverflowHidden CSS 類，以隱藏它的溢位部分。

一個例子：
![](https://img-blog.csdnimg.cn/img_convert/1762f677788c1c682d6815b5740a94e2.png)

其 `defaultSpan` 屬性的型別：`sap.ui.layout.GridSpan`，這個型別是一個字串型別，表示大、中、小螢幕的 Grid 的跨度值。

允許的值由空格字母 L、M 或 S 分隔，後跟容器必須採用的從 1 到 12 的列數，例如：L2 M4 S6、M12、s10 或 l4 m4。

注意：引數必須按順序提供。

預設值為：XL3 L3 M6 S12

意思是，在小螢幕上，Label 用一個完整的行，即 12 來顯示。在中等螢幕的尺寸上，Label span 為 6，因為中等螢幕每一等份的寬度較小，所以增大 M 的值來確保 Label 的顯示不會被截斷。

下圖是一個例子：
![](https://img-blog.csdnimg.cn/img_convert/14f7c74c85f5514a11d83014737cf528.png)

我們在 Chrome 開發者工具裡將 defaultSpan 中的 L6 改成 L1，意思是在 Large 螢幕下，僅僅用一份寬度來顯示 Label，可以預見這會導致 Label 的顯示被截斷：
![](https://img-blog.csdnimg.cn/img_convert/6bbc888e5b0fcff080af746fc83a32f4.png)

同時觸發 Grid 的重新佈局。

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

SAP UI5 sap.ui.layout.Grid 控制元件概述

相關文章