控制元件的預設設定並不適合所有可能的用例。 相反，應用程式可以使用 S、M、L 和 XL 尺寸的各種佈局之一。

本文介紹 SAP UI5 Form 的 ColumnLayout 佈局特性。

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

ColumnLayout 控制元件以基於列的響應方式呈現表單控制元件。根據其大小，Form 控制元件分為一列或多列。 （XL - 最多 4 列，L - 最多 3 列，M - 最多 2 列和 S - 1 列。）

FormContainer 元素根據 FormContainer 元素的數量及其大小分散到列中。例如，如果有 4 列和 2 個 FormContainer 元素，則每個 FormContainer 元素將使用 2 列。如果有 3 列和 2 個 FormContainer 元素，較大的將使用 2 列，較小的將使用 1 列。 FormContainer 元素的大小將根據分配給它的可見 FormElement 元素的數量來確定。如果 FormContainer 元素多於列，則每個 FormContainer 元素僅使用一列。所以Form控制元件的最後一行不會被完全使用。

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

FormContainer 元素的預設大小可以透過使用 ColumnContainerData 作為 LayoutData 來覆蓋。如果一個 FormContainer 元素設定了 ColumnContainerData，其他 FormContainer 元素的大小計算可能不會導致預期的結果。在這種情況下，也將 ColumnContainerData 用於其他 FormContainer 元素。

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

可以使用 ColumnElementData 作為 LayoutData 覆蓋 FormElement 元素的內容控制元件的預設大小。如果分配給 FormElement 元素的一個控制元件設定了 ColumnElementData，則分配給 FormElement 元素的其他控制元件的大小計算可能不會導致預期的結果。在這種情況下，也將 ColumnElementData 用於分配給 FormElement 元素的其他控制元件。

FormElement 元素的放置由瀏覽器列計數邏輯決定。因此，這在不同的瀏覽器中可能會有所不同，並且在某些情況下會導致超出預期的結果。

注意：這個控制元件不能單獨使用，它只是渲染一個 Form 控制元件，所以必須使用佈局聚合將它分配給一個 Form 控制元件。

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

SAP UI5 Form 控制元件的 ColumnLayout 佈局特性

相關文章