Qt使用教程之建立Qt Quick UI表單（四）

<Qt Enterprise最新版下載>

建立標籤

您能夠使用新的文件嚮導來建立UI表單，可用於指定標籤內容和功能。您能夠在MainForm.ui.qml文件中設置QML文件做爲標籤的資源，同時還能夠在Design模式下修改對應的UI表單。

建立標籤內容的UI表單

想要建立標籤內容的UI表單：

1. 選擇File > New File or Project > Qt > QtQuick UI File > Choose。

2. 在Component name字段中輸入Settings。

3. 點擊Next。

4. 點擊Finish來建立UI表單、SettingsForm.ui.qml、一個相應的QML file和Settings.qml。

用一樣的方法建立註釋標籤的UI表單、NotesForm.ui.qml、相應的QML文件和Notes.qml。您不須要歷史標籤的ui.qml文件，在從此會爲它建立QML文件。

建立Settings標籤

Customer Settings標籤包含了所選用戶的信息。

建立標籤內容：

1. 在Projects視圖中雙擊SettingsForm.ui.qml，在Design模式下打開並編輯它。

2. 在Navigator中選擇Item，而後在Properties的Id字段中輸入content。

3. 在Library中選擇Imports > Add Import，而後導入Qt Quick控件和佈局，使QML類型在庫的這些模塊中可見。

4. 從庫中拖動一個Grid Layout到導航器的內容項中。

5. 選擇Layout > Top, Left,Right按鈕來錨定網格佈局到母體中。

6. 在Margin字段中將邊距設置爲12。

7. 在Properties中，設置Column spacing和Row spacing爲8，Columns爲3，Rows爲4。若是您想添加更多的字段，能夠添加必要數量的行。

8. 從庫中拖動4個Label控件、1個Combo Box和3個Text Field控件到導航器中。

9. 在導航器中使用向下箭頭將一個標籤移動到最後文本字段上面的位置。

10. 在屬性中，更改Text字段中的每一個字段的標籤文本。您須要如下的標籤：Title、First Name、Last Name和Customer Id。

11. 在屬性中，更改Placeholder text字段的每一個文本字段的佔位符文本，使其和字段標籤同樣。

12. 選擇客戶ID文本字段，而後在屬性中選擇Layout，將Column span設置爲3，使ID字段跨越網格佈局的長度。

13. 從庫中拖動一個Row Layout佈局到導航器的content項中，而後點擊它。

14. 在屬性中重置行佈局的高度。

15. 選擇Layout > Bottom和Right按鈕來錨定行佈局到母體中。

16. 在錨定的Margin字段中，將邊距設置爲12。

17. 從庫中拖動2個Button控件到導航器的行佈局中。

18. 在屬性中，更改Text字段的按鈕標籤爲Save和Cancel。

19. 在屬性中爲每一個按鈕選擇Layout、> Fill width和 Fill height，使其填充到行佈局的按鈕中。

20. 在導航器中，爲每一個字段選擇Export來導出字段ID做爲屬性。應該會導出如下的項目，以即可以在Settings.qml中引用它們：

property alias customerId: customerId

property alias lastName: lastName

property alias firstName: firstName

property alias gridLayout1: gridLayout1

property alias rowLayout1: rowLayout1

 

property alias save: save

property alias cancel: cancel

property alias title: title

有興趣的朋友能夠點擊查看更多有關Qt的文章！