simpleForm 在 XML 檢視裡定義的 `editable` 屬性：

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

會觸發 SimpleForm.setEditable 方法呼叫：

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

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

同理，設定 layout 屬性：
![](https://img-blog.csdnimg.cn/img_convert/b2081bb9e9e0b4a2704dfee2e8c72c70.png)

這個 layout 是一個單獨的例項：
![](https://img-blog.csdnimg.cn/img_convert/19520bbf0d0f57f0196b2f9dc871c48f.png)

addAllToContent：把 SimpleForm 裡所有的元素新增到控制元件裡：
![](https://img-blog.csdnimg.cn/img_convert/23c79d32586bbeacaeb42afffda164d3.png)

建立幫助文件裡提到的 FormContainer：
![](https://img-blog.csdnimg.cn/img_convert/6e991f0d234cd7bb9f87a17b0918e416.png)

然後建立 FormElement：
![](https://img-blog.csdnimg.cn/img_convert/5e1c52f93acb168a795e0d016a16630e.png)

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

在 form 迴圈裡新增 element：
![](https://img-blog.csdnimg.cn/img_convert/0c1095e029b54c81731af4ec86e9e75c.png)

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

一個 SimpleForm 有一個 form container：
![](https://img-blog.csdnimg.cn/img_convert/94383244776e381293cb537bd55dc03a.png)

一個 form container 有4個 form element：
![](https://img-blog.csdnimg.cn/img_convert/a99496a4a788213d5dde05ef8a0e413e.png)

一個 form element 有一對 label 和 field：
![](https://img-blog.csdnimg.cn/img_convert/415191b30e3e2017d54911a8c483eee1.png)

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

看樣子是 Layout 例項控制這些資料：
![](https://img-blog.csdnimg.cn/img_convert/576da375aaf38a48e1f54e48fb26ec40.png)

建立 grid：
![](https://img-blog.csdnimg.cn/img_convert/32fa40d1403a948b9f559f2eb83c6a9f.png)

四種尺寸：
![](https://img-blog.csdnimg.cn/img_convert/a15af482c7146d3bf45770bf88f2e285.png)

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

這裡能看到硬編碼的 12：
![](https://img-blog.csdnimg.cn/img_convert/2f04f49e2bcf1b8502f362b24f70482e.png)

我程式碼裡設定的 columns = 2：

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

所以 span 為 12 / 2  = 6

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

default span 的計算值：
![](https://img-blog.csdnimg.cn/img_convert/c2d5d9ab55642fe5607b816d1be95bf3.png)

預設值：
![](https://img-blog.csdnimg.cn/img_convert/0c331fe0323122039aef19b55b338cd8.png)

我們可以看出，一個簡單的 SimpleForm，渲染之後，其實生成了總共五層結構：

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

ResponsiveGridLayout 控制元件使用響應式網格呈現表單。在內部，Grid 控制元件用於渲染。使用此佈局，表單以響應式方式呈現。根據可用空間，FormContainer 呈現在一列或不同的列中，標籤呈現在與欄位相同的行或欄位上方。此行為可能會受到此佈局控制元件的屬性的影響。

在 FormContainers、標籤和內容欄位上，可以使用 GridData 更改預設呈現。 FormElements 不支援 GridData。

注意：如果使用 GridData，這可能會導致比預設佈局複雜得多的佈局。這意味著在某些情況下，對其他內容的計算可能不會帶來預期的結果。在這種情況下，應為所有內容控制元件使用 GridData 以禁用預設行為。

此控制元件不能單獨使用，它只是呈現一個 Form，因此必須使用佈局聚合將它分配給一個 Form。

SAP UI5 SimpleForm 控制元件例項的初始化除錯

相關文章