Qt使用教程：使用Qt Quick UI表單（四）

---

<Qt Enterprise最新版下載>

創(chuàng)建標簽

您可以使用新的文件向?qū)韯?chuàng)建UI表單，可用于指定標簽內(nèi)容和功能。您可以在MainForm.ui.qml文件中設置QML文件作為標簽的資源，同時還可以在Design模式下修改對應的UI表單。

創(chuàng)建標簽內(nèi)容的UI表單

想要創(chuàng)建標簽內(nèi)容的UI表單：

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

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

3. 點擊Next。

4. 點擊Finish來創(chuàng)建UI表單、SettingsForm.ui.qml、一個相應的QML file和Settings.qml。

用同樣的方法創(chuàng)建注釋標簽的UI表單、NotesForm.ui.qml、相應的QML文件和Notes.qml。您不需要歷史標簽的ui.qml文件，在今后會為它創(chuàng)建QML文件。

創(chuàng)建Settings標簽

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

創(chuàng)建標簽內(nèi)容：

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

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

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

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

5. 選擇Layout > Top, Left,Right按鈕來錨定網(wǎng)格布局到母體中。

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

7. 在Properties中，設置Column spacing和Row spacing為8，Columns為3，Rows為4。如果您想添加更多的字段，可以添加必要數(shù)量的行。

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字段跨越網(wǎng)格布局的長度。

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 Enterprise最新正版授權！詳情請"咨詢在線客服"

葡萄城經(jīng)典UI產(chǎn)品惠風迎春，驚喜折扣禮品送不停！優(yōu)惠詳情點擊查看>>