ColumnLayout 控制元件以基於列的響應方式呈現表單組。 根據其大小，該組被分為一列或多列。

- XL – max. 6 columns
- L – max. 3 columns
- M – max. 2 columns
- S – 1 column

對於 XL 碼，SAP 建議對包含大量內容的大型表單使用完整的 6 列。 這在組織內容和表單組時為使用者提供了更大的靈活性。

為了更好地利用螢幕空間並在不滾動的情況下為使用者提供更好的概覽，我們可以跨多個列平衡表單組。 根據組元素的數量及其大小，組元素分散到列中。

聽起來有點抽象？

看個具體的例子：

- 4 列和 2 組：每組將使用 2 列。
- 3 列 2 組：較大的使用 2 列，較小的使用 1 列。

組元素(group element)的大小將由分配給它的可見元素(visible element)的數量決定。 如果組多於列，則每個組僅使用一列。 所以表單控制元件的最後一行不會被完全使用。 這將導致空白。

表單元素散佈到以類似報紙的順序排列的組的列中。 標籤和欄位的位置取決於所用列的大小。 如果有足夠的空間，標籤在欄位旁邊，否則在欄位上方。

如果使用預設表單設定，每個表單組將顯示在單獨的列中。 根據表單組的大小，這可能意味著使用者需要向下滾動才能檢視完整的表單，即使螢幕右側有未使用的空間。

下圖是一個預設的 form group 的佈局情況：

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

一個 form group，基於 balanced column layout：
![](https://img-blog.csdnimg.cn/img_convert/0502e4c6ea8b7d190e00cb3e5e514f43.png)

2 個 form groups，使用預設佈局：

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

2 個 form groups，使用 balanced column 佈局：

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

在 Dynamicforms 中，表單的內容、行為和樣式由 JSON 定義。 要建立表單，開發人員需要新增表單控制元件並定義其屬性，例如控制元件型別、名稱、標籤等。

SAP UI5 Form 表單 Column Layout 下的 Column 個數分配問題

相關文章