原創|使用教程|編輯:龔雪|2016-03-01 09:25:34.000|閱讀 1164 次
概述:本教程介紹如何使用ui.qml文件開發一個應用程序,使應用程序邏輯從UI中分離。該教程使用Qt Quick Designer實現一個簡化版的UI表單示例,它為一個客戶數據庫提供接口,只用QML和JavaScript編寫。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
您可以使用新的文件向導來創建UI表單,可用于指定標簽內容和功能。您可以在MainForm.ui.qml文件中設置QML文件作為標簽的資源,同時還可以在Design模式下修改對應的UI表單。
想要創建標簽內容的UI表單:
1. 選擇File > New File or Project > Qt > 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文件。
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
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:慧都控件網